CSS样式——div居中方法

1、绝对居中

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

            width: 400px;
            height: 300px;
            background-color: orange;

如下图所示：

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

            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;

结果如下所示：

2、水平垂直居中

给其父元素添加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;

显示结果如下：

3、（定位+变形）居中

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

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

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

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

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

             position: absolute;
             top: 50%;
             left: 50%;
             transform: translate(-50%,-50%);

显示结果如下：