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

【问题标题】：Aligning a div to center of page while its position is absolute?将 div 与页面中心对齐，而其位置是绝对的？
【发布时间】：2011-02-27 09:04:06
【问题描述】：

如果position 是absolute，我如何将align 和DIV 放在我的页面中心？如果可能不使用javascript。

【问题讨论】：

你尝试了什么。你用谷歌搜索过吗？
见 stackoverflow.com/a/34726113/3302747 也有 js fiddle

标签： html css

【解决方案1】：

更新：这是一个旧答案，the answer currently just below this 提供了一个更好的解决方案，即使您的 div 具有动态宽度也可以使用。另一种选择，使用margin: auto，可以找到here, on a different, but related, question。

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

CSS：

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

您将左上角置于中心，然后使用宽度一半的负边距使其居中。

【讨论】：

【解决方案2】：

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

【讨论】：

这对于动态宽度 div 非常有效，太棒了！
不使用 flexbox 的最佳响应答案。谢谢！

【解决方案3】：

试试这个：

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

【讨论】：

太棒了！像魅力一样工作。

【解决方案4】：

不可能让 HTML 自动居中任何绝对定位的内容。哎呀，HTML几乎没有使用CSS边距水平居中:-)

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

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

jQuery .centerInClient() plugin

希望这会有所帮助。

【讨论】：

【解决方案5】：

position: absolute的含义正是你要指定你的div应该放在离页面边缘多远的地方。由于您事先不知道屏幕的宽度，因此无法将其居中。

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

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

和 CSS

#external {
    position: absolute
}

#internal {
    margin: 0 auto
}

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

【讨论】：

【解决方案6】：

这是一个使用百分比的简单方法：

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

只需设置所需的页面宽度，并将左边距设置为余数的一半。在这种情况下，width 是 80%，剩下 20%。将left:设置为10%，它将使页面居中。

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

【讨论】：