CSS样式: 实现div水平垂直居中的方法

给其父元素添加display: flex;弹性布局。
内容对齐（justify-content）属性：应用在弹性容器上，即父元素上。把弹性项沿着弹性容器的主轴线（main axis）对齐，如果横向有多个div，则X轴就为当前弹性容器的主轴线，Y轴为副轴线，反之亦然。

            display: flex;
            justify-content: center;
            align-items: center;

结果显示如下：

如果注释掉align-items: center;属性，元素则按照当前主轴X轴居中，由于给元素开启弹性布局，故主轴应为X轴，可设置两个div验证。

            display: flex;
            justify-content: center;
            /*align-items: center;*/

显示结果如下：

如果注释掉justify-content属性，使用align-items: center;属性，则居中对齐弹性盒的各项 <div> 元素，默认是沿着副轴Y轴居中，（上文提到过：由于给元素开启弹性布局，故主轴应为X轴）。

            display: flex;
            /*justify-content: center;*/
            align-items: center;

显示结果如下：