将div与页面中心对齐，而其位置是绝对的？

Question

align DIV position时，如何absolute {{1}}到我的页面中心？如果可能没有使用javascript。

Answer 1

如果您知道要居中的DIV的宽度，可以执行此操作。

CSS：

div
{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 300px;
    margin-top: -150px;
    margin-left: -200px;
}

将左上角放在中间位置，然后使用宽度的一半的负边距使其居中。

Answer 2

position: absolute;
left: 50%;
transform: translateX(-50%);

Answer 3

试试这个：

position: absolute;
width: 600px;
left: 50%
margin-left: -300px;

Answer 4

无法让HTML自动定位任何绝对定位的内容。哎呀，HTML几乎没有使用CSS边距水平居中： - ）

顾名思义绝对定位是绝对位置，你可以获得顶部和左侧固定位置，并且相对于这些位置应用任何边距。绝对定位会忽略自动。

有使用JavaScript和jQuery的解决方案。这是我写的并且经常使用的一个：

jQuery .centerInClient() plugin

希望这有帮助。

Answer 5

position: absolute的含义正是您要指定div应放置在页边距的距离。由于您不知道屏幕的宽度是先验的，因此无法将其居中。

我猜你只是想从页面流中删除div，同时保持居中。在这种情况下，添加容器div就足够了，比如

<div id="external">
    <div id="internal">
    </div>
</div>

和CSS

#external {
    position: absolute
}

#internal {
    margin: 0 auto
}

我没有测试上面的布局，但我认为它应该可行。

Answer 6

以下是使用百分比的简单方法：

div {
    width: 80%;
    position: absolute;
    left: 10%;
}

只需设置所需的页面宽度，并将左边距设置为剩余边距的一半。在这种情况下，width为80％，剩下20％。将left:设置为10％，它会将div放在页面中心。

使用此方法将允许div使用不同的窗口大小和屏幕分辨率进行缩放。