如何将绝对定位的元素居中？

Posted 2023-03-05

【中文标题】如何将绝对定位的元素居中？

【英文标题】：How do I center an absolutely positioned element?

【发布时间】：2013-10-21 00:29:56

【问题描述】：

div 
    width: 400px;
    height: 400px;
    background: yellow;
    z-index: 99;
    margin: 0 auto;

我有一个 div 弹出消息，它将在顶层并位于页面中间。

但是，如果我设置position:absolute; z-index:99;，它将在顶部，但margin:0 auto; 将不起作用。

我怎样才能将它保持在图层顶部并显示在中间？

【问题讨论】：

top:50%; 和 right:50% 添加这些属性

而不是位置：绝对； - 使用位置：相对；

相对不能不叠加

如果需要使用 position:absolute;然后添加规则：left：0；和 right:0 和 margin:auto; - 这将保持居中

【参考方案1】：

通过使用两个嵌套元素 (demo) 使应用了 position: absolute; 的元素居中。

第一个元素将绝对定位以将其置于所有其他元素之上 第二个元素就像您所期望的那样工作：使用 margin: 0 auto; 将其居中。

HTML：

<div class="outer-div">
    <div class="inner-div">
        <p>This is a modal window being centered.</p>
    </div>
</div>

CSS：

.outer-div 
    position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    z-index: 13;

    /*
     * Setting all four values to 0 makes the element as big
     * as its next relative parent. Usually this is the viewport.
     */


.inner-div 
    margin: 0 auto;
    width: 400px;
    background-color: khaki;