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

为div id = 3

设置marging:0 auto

Answer 2

#1必须为position: absolute，#3设置left: 50%并向左偏移一半宽度

#d1 {
    position: absolute;
}

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

JSFiddle玩。

我已将内联样式移至CSS面板，并将id分别更改为d1，d2和d3。

Answer 3

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

如果您要问的话，这将使div#3不仅仅是horisontaly而是垂直于div＃2。请记住，你不能拥有id的数字。

如果您想将div#3定位到div#1 ...，您只需将position:relative样式从div#2移至div#1。

Answer 4

如果你想让它完全位于屏幕的中心，你需要在2个div中包含ID＃3，一个负责垂直对齐，另一个负责水平对齐：

<div id="vertical">
    <div id="horizontal">
        <div id="3" style="position: absolute;">
    </div>
</div>

详情请见dead-center

div中的div与页面相关

4 个答案: