如何将div与绝对位置垂直对齐在一起？

Question

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,

Answer 1

give your inner divs line-height:400px;

http://jsfiddle.net/2DXPg/1/

Answer 2

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>

Answer 3

Style the two inner divs with

position: relative; top: 0px;

in addition to what you already have

Answer 4

Add

margin: auto;

to the div with the content you would like to center. For this to work you MUST set a width on this div too.

Maybe

width: 100%;

should do the trick.