How can I use a CSS transform to vertically-center two overlapping elements?


Tags: css,css-position

Problem :

I have a relatively-positioned div wrapper, and I want to vertically-align a div inside of it. Various other Stack answers seem to suggest this is the right way to do this:

.vcenter {position: relative; top: 50%; transform: translateY(-50%); }

That works great, but only for a single child element. I want to have two overlapping child divs, a picture and some text, both vertically-centered within the wrapper div:

<div class="wrap">
  <div class="foo vcenter"></div>
  <div class="bar vcenter"></div>
</div>

This doesn't work - the transform applies to both children, but the second child is offset vertically by the height of the first child.

I made a simple jsfiddle that may make this clearer.

Is there a way to get both elements to each center as if they were the only child?

(PS - don't tell me to replace them with a single div containing the text and the image as a background, they need to move independent of each other)



Solution :

You should use position absolute instead of relative:

.vcenter {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
}

Updated plunkr


    CSS Howto..

    How to make dropdown list unselectable?

    How to fix this cell in the GridView?

    How to write css for a div under a div which specific id which is itself under a div with specific class?

    SASS: normalize.css works, but does not show up in compiled CSS file?

    How to design the data that you gathered from the table

    How can I create this button in CSS3?

    How can I include an element within a div without using html?

    How to specify font-size for all bold text in the div?

    How to change where a CSS transition starts from?

    How can I make a DIV background change color on hover if the DIV has a class of “disabled”? [closed]

    How to Make a Fluid Layout

    How can I get the dots that surround some elements to go away/become solid lines?

    How to create a sliding navigation with either jquery or css? [closed]

    How to Add external Javascript and CSS for CakePhp

    Compass delimited list separator - how to set to – [duplicate]

    navbar is split into multiple div classes - how to stick them all to the top on scroll? (javescript)

    How to move a carousel item to the middle when it's clicked in jquery

    How do I apply the following CSS to only the Parent nodes of a Kendo Tree View?

    How to change the height of div with the content of other div

    Css: how to combine table and column specification into a single selector?

    How to make background image position stay same on all resolutions?

    How can I make inputs display inline?

    How to make horizontal lines sit beside circle bullets using CSS

    How do you add multile vendor prefixes to one css property?

    How can I resize these divs while keeping the same layout?

    How to apply css, after Jquery adds a class?

    How can I apply a CSS class to an element with a given id, without modifying the element?

    How to keep animated gifs animated while scrolling on iOS devices?

    How to decrease spacing between bootstrap glyphicons

    How to add classes to div using jquery in sequence like animation