如何垂直对齐一个div的绝对位置相互重叠?

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.

我有两个div，我需要把它们放在一起，放在另一个div里面。但是每个div的内容都需要垂直对齐。当我把它们放在顶部时，它们不是垂直居中的。

Is there a way to mix both of these styles to do this?

有没有办法把这两种风格混在一起?

Or is this possible with jQuery somehow?

或者这在jQuery中可能吗?

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.

我有高度和宽度，表格单元和垂直对齐作为中间。它将内容居中，直到我添加z索引所需的绝对位置。

Any ideas? Thanks,

什么好主意吗?谢谢,

4 个解决方案

#1

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

您可以在第二个div中添加一个额外的div: 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>

#2

give your inner divs line-height:400px;

给出你的内部divs线高:400px;

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

#3

Style the two inner divs with

用两个内在的女主角来设计风格

position: relative; top: 0px;

in addition to what you already have

除了你已经拥有的。

#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.

以你想要的内容为中心的div。为此，您还必须为这个div设置宽度。

Maybe

也许

width: 100%;

should do the trick.

应该足够了。

#1