如何以絕對定位的元素爲中心？

Question

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

我有一個div彈出消息，這將是在頂層和頁面的中間位置。

但是，如果我設置position:absolute; z-index:99;它將在上面，但margin:0 auto;將無法​​正常工作。

我怎樣才能保持它在層的頂部，也顯示在中間？

Answer 1

通過使用兩個嵌套元素（demo）定心與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; 
}