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

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

    

         
内容占位
    

.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