div内div相对于页面居中

Question

我知道如何使div层相对于它的包装器或父容器居中，但是当我在页面主体的div中有div时又该怎么办呢？如何使最小的div相对于正文居中？

<div id="1" style="width: 100%">
<div id="2" style="width: 22.5%; height: 1000000000px; margin-left: 12%;">
<div id="3" style="position: absolute;">
</div>
</div>
</div>

在上面的例子中，我如何将id=为“3”的div与id=为“1”的div居中？

Answer 1

#1必须为position: absolute，#3将left: 50%和偏移量设置为宽度的一半

#d1 {
    position: absolute;
}

#d3 {
    position: absolute;
    left: 50%;
    width: 100px;
    margin-left: -50px;
}

用于播放的JSFiddle。

我已经将内联样式移动到CSS面板，并将ids分别更改为d1、d2和d3。

Answer 2

为div id=3设置marging:0 auto

Answer 3

div#2 {
  position: relative;
}
div#3{
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

这将不仅使div#3在水平方向上居中，而且在垂直方向上与div#2居中，如果您这样要求的话。记住你不能用数字来表示id。

如果您想要将div#3居中到div#1 ...您只需将position:relative样式从div#2移动到div#1即可。