Как я могу центрировать абсолютно позиционированный элемент?

Question

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

У меня есть сообщение по умолчанию для всплывающих окон, оно будет на верхнем слое и в середине страницы.

но если я установлен position:absolute; z-index:99; будет сверху, но margin:0 auto; не работает.

как я могу держать его поверх слоя, а также отображать в середине?

Answer 1

Сцентрированный элемент с использованием position: absolute; выполненных работ с использованием двух вложенных элементов (demo).

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