引自《CSS世界》144页
我只是把这个放进了一个div中,方便以后运用,效果如图:
.container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, .5);
text-align: center;
white-space: nowrap;
font-size: 0;
z-index: 99;
}
.container:after {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.dialog {
display: inline-block;
vertical-align: middle;
border-radius: 6px;
background-color: #fff;
font-size: 14px;
text-align: left;
white-space: normal;
}
.content {
width: 240px;
height: 50px;
padding: 20px;
}
.test {
width: 700px;
height: 300px;
background-color: #0ff;
position: relative;
}
<div class="test">
<div class="container">
<div class="dialog">
<div class="content">内容占位</div>
</div>
</div>
</div>
可以修改高度,比如改.container:after hight:80%;