div {
width: 400px;
height: 400px;
background: yellow;
z-index: 99;
margin: 0 auto;
}
我有一个 div 弹出消息,它将在顶层和页面中间位置。
但是如果我设置position:absolute; z-index:99;
它会在顶部,但 margin:0 auto;
不起作用。
如何让它保持在层的顶部并显示在中间?
最佳答案
通过使用两个嵌套元素 ( demo),使 position: absolute;
应用的元素居中。
- 第一个元素将被绝对定位以将其置于所有其他元素之上
- 第二个元素的工作方式与您预期的一样:使用
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;
}
关于html - 如何使绝对定位的元素居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19343331/