弹窗和垂直居中是大家常听到和常用到的知识点和内容，我这里给大家分享下适配超好的案例。希望大家一起学习进步
<div class="container">
<div class="dialog">
<div class="content">内容占位</div>
</div>
</div>
.container {
position: fixed;
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: "";
height: 100%;
display: inline-block;
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: 120px;
padding: 20px;
}
以下是运行效果截图。可以调整 after 伪元素的 height 高度，达到视觉上的垂直居中，目前是绝对居中。
原理概述：
1.伪元素相当于行框盒子前的x文字内容。这里的原理可以学习《css新世界》，里面有详细介绍。书中称为幽灵空白节点。每一个行框盒子都会存在。默认这个x文字内容会紧贴最上边缘。又因为我们把 font-size 设置为0，所以改文字会有一半的位置在外面。这是默认情况下，文字基线对齐。我们设置了 vertical-aligh:middle 和 height: 100%。所以改伪元素会全屏居中。
2.此时我们把内容区域 dialog 也设置成 vertical-aligh:middle，则会自动和外部对齐，则最终实现了不定高区域的自适应全屏居中。
3.这里我加了宽高，大家可以去除试一下，任然是垂直居中。
4.补充：如果是定高的垂直居中我们可以结合 margin:auto 实现。这也是我自己本身常用的方法。
image
