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

Question

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

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

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

如何保持它在顶层并同时显示在中间？

- Ben

---

top:50%; 和 right:50% 添加这些属性。 - Adam Azad

请使用position:relative;而不是position:absolute; - Danield

相对位置不能重叠。 - Ben

如果您需要使用position:absolute，请添加以下规则：left:0;和right:0以及margin:auto; - 这将使其保持居中。 - Danield

Answer 1

使用应用了position:absolute;样式的元素居中，需要嵌套两个元素(演示)。

1. 第一个元素将会被绝对定位以使其位于所有其他元素之上
2. 第二个元素像你预期的那样工作：使用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;
}

- kleinfreund