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

Question

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

我有一个div pop消息,它将位于顶层并位于页面中间位置.

但是,如果我设置position:absolute; z-index:99;它将在顶部但margin:0 auto;不会工作.

我如何将它保持在图层之上并在中间显示？

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;
}