基于vertical-align属性的水平垂直居中弹框

关于使用css方法的优点：

1. 节省了许多无谓的定位JS代码，不需要浏览器resize事件之类的处理，当弹框内容动态变化的时候，也无须重新定位
2. 性能更改、渲染速度更快
3. 可以非常灵活的控制垂直居中的比例
4. 容器设置overflow:auto可以实现弹框高度超过一屏时依然可以看见屏幕外内容

实现效果图：

CSS核心代码：

.container{
            position:fixed;
            top: 0; right: 0; bottom: 0; left: 0;
            background-color: rgba(0, 0, 0, .5);
            text-align: center;/*水平居中*/
            font-size: 0;/*font-size设置为0，使得x中心点就在容器的垂直中心线上*/
            white-space: nowrap;
            overflow: auto;
        }
        .container::after{
            content: ' ';
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }
        .dialog{
            display: inline-block;
            vertical-align: middle;/*弹框的垂直中心位置和x中心点位置对齐，实现垂直居中效果*/
            text-align: left;
            font-size: 14px;
            white-space: normal;
            background-color: #ffffff;
            border-radius: 5px;
        }
        .content{
            height: 120px;
            width: 280px;
            padding: 20px;
        }