给div设置样式，div默认显示位置为body的左上方。

如下图所示： 首先给div添加绝对定位，并设置上下左右边距为0，然后使用margin: auto;自动居中。

结果如下所示：

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

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

显示结果如下：

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

显示结果如下：

给父元素添加 position: relative;相对定位。

给自身元素添加position: absolute;绝对定位。

top: 50%;使自身元素距离上方“父元素的50%高度”的高度。

left: 50%;使自身元素距离上方“父元素的50%宽度”的宽度。

transform: translate(-50%,-50%);使自身元素再往左，往上平移自身元素的50%宽度和高度。

显示结果如下：