适配性绝佳的全屏居中弹出框（不定高）

弹窗和垂直居中是大家常听到和常用到的知识点和内容，我这里给大家分享下适配超好的案例。希望大家一起学习进步

<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 实现。这也是我自己本身常用的方法。