css中的多种垂直水平居中

简介

在面试的时候css面试题里面基本上都会问一个元素垂直水平居中，其实这个有多种方式实现，同时元素能够是固定宽高、不固定宽高的。

固定宽高

• position absolute + 负margin
• position absolute + margin auto
• position absolute + calc

不固定宽高

• position absolute + transform
• css-table
• flex
• grid

下面就直接上代码，公用的html代码和css代码就写在这里后面都会在这个基础上增长代码。 html公用代码：

<div class="container">
        <div class="box-center">
            box-center
        </div>
    </div>
复制代码

css公用代码：

.container {
        width: 500px;
        height: 300px;
        border: 1px solid red;
    }
    .box-center {
        width: 100px;
        height: 100px;
        background-color: red;
        color: #fff;
    }
复制代码

有两个元素它们是父子级的关系，要达到的效果是子元素要在父元素中垂直水平居中。

固定宽高

固定宽高的意思就是要居中的这个元素它的宽高都是固定的值，下面一个一个用代码实现。

position absolute + 负margin

css代码以下：

/* 此处引用上面的公共代码 */
    .container {
        position: relative;
    }
    .box-center {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -50px;
        margin-left: -50px;
    }
复制代码

利用绝对定位让子元素基于父元素的左上角偏移50%，可是这样不是真正的居中由于它多移动了自己元素的宽度的一半和高度的一半，这个时候咱们能够经过负margin来修正这个问题，因此就有了-50px这两个属性。

position absolute + margin auto

css代码以下：

/* 此处引用上面的公共代码 */
    .container {
        position: relative;
    }
    .box-center {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
复制代码

这种方式经过设置各个方向的距离都是0，此时再讲margin设为auto，就能够在各个方向上居中了。

position absolute + calc

css代码以下：

/* 此处引用上面的公共代码 */
    .container {
        position: relative;
    }
    .box-center {
        position: absolute;
        top: calc(50% - 50px);
        left: calc(50% - 50px);
    }
复制代码

经过calc计算属性减去元素自己高度和宽度的一半。

不固定宽高

固定宽高的意思就是要居中的这个元素它的宽高都是不固定的值，不固定宽高的方法是能够覆盖上面固定宽高的方法，下面一个一个用代码实现。

position absolute + transform

css代码以下：

/* 此处引用上面的公共代码 */
    .container {
        position: relative;
    }
    .box-center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
复制代码

修复绝对定位的问题，还能够使用css3新增的transform，transform的translate属性也能够设置百分比，其是相对于自身的宽和高，因此能够讲translate设置为-50%，就能够作到居中了。

css-table

css代码以下：

/* 此处引用上面的公共代码 */
    .container {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }
    .box-center {
        display: inline-block;
    }
复制代码

经过display: table-cell把div元素变为table元素的实现效果，经过这个特性也能够实现垂直水平居中。

flex

css代码以下：

/* 此处引用上面的公共代码 */
    .container {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .box-center {
        text-align: center;
    }
复制代码

经过flex的两个属性实现垂直水平居中。

grid

css代码以下：

/* 此处引用上面的公共代码 */
    .container {
        display: grid;
        justify-items: center;
        align-items: center;
    }
    .box-center {
        text-align: center;
    }
复制代码

经过grid布局实现居中，若是grid不太了解能够看grid布局

其余

有两种比较特殊的垂直水平居中的方式，应用场景比较少或者代价比较大，因此在这几记录一下以下：

• 行内元素居中
• table布局

行内元素居中

css代码以下：

/* 此处引用上面的公共代码 */
    .container {
        text-align: center;
        line-height: 300px;
        font-size: 0; // 兼容代码
    }
    .box-center {
        display: inline-block;
        vertical-align: middle;
        line-height: initial;
        font-size: 14px;
    }
复制代码

把container设置为行内元素，经过text-align就能够作到水平居中，经过vertical-align也能够在垂直方向作到居中。

table布局

改变html结构以下：

<table>
        <tbody>
            <tr>
                <td class="container">
                    <div class="box-center">box-center</div>
                </td>
            </tr>
        </tbody>
    </table>
复制代码

css代码以下：

/* 此处引用上面的公共代码 */
    .container {
        text-align: center;
    }
    .box-center {
        display: inline-block;
    }
复制代码

利用table属性实现。

总结

上面实现总结以下面表格所示：

方法	居中元素定宽高固定	PC兼容性	移动端兼容性
position absolute + 负margin	固定宽高	ie6+, chrome4+, firefox2+	安卓2.3+, iOS6+
position absolute + margin auto	固定宽高	ie6+, chrome4+, firefox2+	安卓2.3+, iOS6+
position absolute + calc	固定宽高	ie9+, chrome19+, firefox4+	安卓4.4+, iOS6+
position absolute + transform	不固定宽高	ie9+, chrome4+, firefox3.5+	安卓3+, iOS6+
css-table	不固定宽高	ie8+, chrome4+, firefox2+	安卓2.3+, iOS6+
flex	不固定宽高	ie10+, chrome4+, firefox2+	安卓2.3+, iOS6+
grid	不固定宽高	ie10+, chrome57+, firefox52+	安卓6+, iOS10.3+
table布局	不固定宽高	ie6+, chrome4+, firefox2+	安卓2.3+, iOS6+
行内元素居中	不固定宽高	ie6+, chrome4+, firefox2+	安卓2.3+, iOS6+

推荐用法：

• PC端有兼容性要求，宽高固定，推荐absolute + 负margin
• PC端有兼容要求，宽高不固定，推荐css-table
• PC端无兼容性要求，推荐flex
• 移动端推荐使用flex

之后确定grid会大方异彩。

参考

CSS实现水平垂直居中的1010种方式 原创