Without knowing the height of the element or parent container I don't think it is possible without using a flex layout with just CSS.
If you know the height you can do top:50% margin-top: (negative half the height). Or you can make the parent display table its child display table cell and vertical align middle. I run into this issue constantly at my job and if I don't know the height of the parent or children I usually just use JS to do it since we don't support flex layout. — Sent from Mailbox On Wed, Jun 3, 2015 at 8:10 PM, Tom Livingston <tom...@gmail.com> wrote: > #one { > position:relative; > background-color:blue; > height:350px; > width:350px; > } > .two { > background-color:orange; > height:125px; > width:125px; > position:relative; > top: 50%; > transform: translateY(-50%); > margin: 0 auto; > } > On Wed, Jun 3, 2015 at 8:00 PM, Tom Livingston <tom...@gmail.com> wrote: >> It's: >> >> top:50%; transform: translateY(-50%) >> >> On Wed, Jun 3, 2015 at 7:46 PM, Crest Christopher >> <crestchristop...@gmail.com> wrote: >>> I've come across many pages how to center a item horizontally and >>> vertically, one method {margin: 0 auto;} works great, horizontally, not >>> vertically. I found another solution whereas, all I do is add >>> {top:50%;translateY(-50%);} to the child, that is not working either ? >>> >>> [Example <https://jsfiddle.net/WildWind/bs84tegs/>] >>> ______________________________________________________________________ >>> css-discuss [css-d@lists.css-discuss.org] >>> http://www.css-discuss.org/mailman/listinfo/css-d >>> List wiki/FAQ -- http://css-discuss.incutio.com/ >>> List policies -- http://css-discuss.org/policies.html >>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ >> >> >> >> -- >> >> Tom Livingston | Senior Front End Developer | Media Logic | >> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com >> >> >> #663399 > -- > Tom Livingston | Senior Front End Developer | Media Logic | > ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com > #663399 > ______________________________________________________________________ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/