css弹出窗口80%居中,适配性绝佳的全屏居中弹出框（不定高）

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

内容占位

.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