How to vertically align a div with absolute position on top of each other?

css, html, jquery, position, z-index

Solution

You can add an extra-div inside the second one: http://jsfiddle.net/MDJDx/

<div style="width:100%">
  <div style="height:400px; width:400px; display:table-cell; vertical-align:middle; z-index:0; position:relative;top:0;">img</div>
  <div style="height:400px; width:400px; z-index:1; position:absolute; top:0">
    <div style="height:400px; width:400px; display:table-cell; vertical-align:middle; position:relative;">img</div>
  </div>
</div>

Problem

I have two divs, that I need to be places right on top of each other, inside another div. Simple, I use z-index and give them position:absolute. But the contents of each of these divs needs to be vertically aligned. When I position them on top, they do not center vertically. Is there a way to mix both of these styles to do this? Or is this possible with jQuery somehow? This is basically what I have. ``` <div style="width:100%"> <div style="height:400; width:400; display:table-cell; vertical-align:middle; z-index:0; position:absolute;"><img></div> <div style="height:400; width:400; display:table-cell; vertical-align:middle; z-index:1; position:absolute;"><img></div> </div> ``` I have height and width, table-cell and vertical-align as middle. This centers the content until I add the absolute position which I need for the z-index to work. Any ideas? Thanks,

Original source