0

我知道如何将 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 居中？

4

4 回答 4

0

设置marging:0 auto为 div id=3

于 2013-01-28T08:27:42.060 回答
0

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

于 2013-01-28T09:00:40.323 回答
-1 
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。

于 2013-01-28T08:31:17.680 回答
-1

如果您希望它准确定位在屏幕的中心，您需要将 ID#3 包含在 2 个 div 中，一个负责垂直对齐，另一个负责水平对齐：

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

更多细节在这里：死点

于 2013-01-28T08:35:54.063 回答