如何將絕對定位的元素居中？

Question

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

我有一個div pop消息，它將位於頂層並位於頁面中間位置。

但是，如果我設置position:absolute; z-index:99; position:absolute; z-index:99; 它將位於頂部但margin:0 auto; 不會工作。

我如何將它保持在圖層之上並在中間顯示？

Answer 1

使position: absolute;居中的元素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;
}