弹框水平垂直居中的另一种实现

我们在开发中会遇到一个比较常见的一个需求，就是遮罩层加一个弹框的实现；

我们先看一下著名的SweetAlert的实现方式，也是大部分开发者的实现方式

采用fixed定位 左上各偏移50%在加上宽度一半的反方向偏移

今天介绍另外一种实现方式：基于vertical-aglin

效果：

CSS代码：

方法原理是借助伪元素创建一个和.dialog容器一样，但宽度为0的inline-block元素，container容器的font-size:0 ；container容器和伪元素中心点对齐；

弹框.dialog容器设置vertical-aglin：middle；容器中心点和container容器中心点一致，就实现了，垂直居中效果。