CSS的居中问题，五大方法一次解决

五种CSS常见居中方式（水平居中、垂直居中）

1.margin居中

实现块元素的水平居中

HTML：

<div class="box"></div>

CSS:

.box{
	width: 200px;
	height: 200px;
	background-color: #ff6700;
	margin: 0 auto;
}

效果图：

2.绝对定位 absolute

实现元素 水平 和 垂直 两个方向的居中

使用绝对定位来设置垂直居中，要求元素的大小必须是确定的

HTML：

<div class="box">
        <div class="inner">

        </div>
</div>

CSS：

.box{
            width: 500px;
            height: 500px;
            background-color: #ff6700;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
}
.inner{
            width: 200px;
            height: 200px;
            background-color: #4ce74c;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
}

效果图：

分别设置四个方向的偏移量为0，配合margin:auto;
可以实现水平+垂直两个方向的居中

    注意：这里通过设置偏移量的居中方式，是该元素依照
    它的包含块元素（距离最近开启定位的祖先元素）来定位的，
    如果它的祖先元素都没有开启定位，则包含块为HTML与视口
    之间的矩形框，也被称为初始包含块
    在上面里的例子中，可以将box里相关的偏移量与margin去除掉，
    这样inner还会在box中居中，但是box不会居中，如下图：

3.表格 table-cell

实现元素 水平 和 垂直 两个方向的居中

情况1：表格中的div居中
HTML：

    <div class="box">
        <div class="inner"></div>
    </div>

CSS：

.box{
            width: 500px;
            height: 500px;
            background-color: #ff6700;
            /* 设置父元素为表格 */
            display: table-cell;
            /* 设置元素的垂直对齐方式，实现垂直居中 */
            vertical-align: middle;
}
.inner{
            width: 200px;
            height: 200px;
            background-color: #4ce74c;
            /* 控制左右边距，水平居中 */
            margin: 0 auto;
}

效果图：

情况2：表格中的内容居中

HTML：

    <div class="content">
        <span>表格中文字居中</span>
    </div>

CSS：

        .content{
            width: 300px;
            height: 300px;
            background-color: #4c82e7;
            margin: 0 auto;
            /* 设置元素为表格 */
            display: table-cell;
            /* 设置元素的垂直对齐方式，实现垂直居中 */
            vertical-align: middle;
            /* 设置文字水平居中 */
            text-align: center;
        }

效果图：

4.变形 transform

实现元素 水平 和 垂直 两个方向的居中

HTML：

    <div class="box">
        <div class="inner"></div>
    </div>

CSS：

        .box{
            width: 500px;
            height: 500px;
            background-color: #ff6700;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
        }

让元素分别横向（left,right）、纵向（top，bottom）偏移50%
（注：这里的50%为包含块的50%）
做完这一步后，元素并没有居中，而是边贴在了其包含块的的中线上，

元素水平方向的中线和其包含块的中线相差 元素宽度的一半
元素垂直方向的中线和其包含块的中线相差 元素高度的一半

这个时候再使用transform 使元素在X和Y两个方向进行移动平移
（注：这里的50%为元素的50%）

效果图：

5.弹性盒 flex

实现元素 水平 和 垂直 两个方向的居中

HTML：

    <div class="box">
        <div class="inner"></div>
    </div>

CSS：

        .box{
            width: 500px;
            height: 500px;
            background-color: #ff6700;
            /* 设置父元素为弹性盒 */
            display: flex;
            /* 设置主轴居中对齐 */
            justify-content: center;
            /* 设置侧轴居中对齐 */
            align-items: center;
        }
        .inner{
            width: 200px;
            height: 200px;
            background-color: #4ce74c;
        }

本人小白，如果纰漏，请各位大神斧正

如果对您有帮助，点赞、收藏、分享 三连一波，谢谢