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/
