你真的掌握了CSS水平垂直居中了吗？

居中这个特点在网页中真的是随处可见，这是一个非常基础但又是非常重要的属性，所以面试官也经常会在面试中问到这个问题。我们要做的不是只掌握一两种，而是要尽可能多地掌握大部分方法。现在就让我们来看一看水平垂直居中都有哪一些常见的方法吧。

我认为可以将这些方法分成两个大类：居中元素（子元素）的宽高已知和居中元素宽高未知

居中元素宽高已知

• absolute + margin
• absolute + calc

居中元素宽高未知

• flex
• absolute + transform
• lineheight
• grid
• css-table
• writing-mode

首先，让我们来看一下子元素宽高未知的居中方法。

flex

flex应该是本人最喜欢用的方法之一了。代码简介明了，通俗易懂，没有太多花里胡哨的东西。

<div class="wrap">
        <div class="box">Hello World!</div>
</div>

.wrap {
    border: 1px solid black;
    width: 400px;
    height: 400px;
}

.box {
    background-color: blue;
}

.wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}

【注】以下效果图一样就不再放图了

grid

这是css3一个新的网格布局，但由于兼容性较差，不建议使用。

<div class="wrap">
        <div class="box">Hello World!</div>
</div>

.wrap {
    border: 1px solid black;
    width: 400px;
    height: 400px;
}
.box {
    background-color: blue;
}
.wrap {
    display: grid;
}
.box {
    align-self: center;
    justify-self: center;
}

absolute + transform

<div class="wrap">
        <div class="box">Hello World!</div>
</div>

.wrap {
    border: 1px solid black;
    width: 400px;
    height: 400px;
}
.box {
    background-color: blue;
}
.wrap {
    position: relative;
}
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

lineheight

<div class="wrap">
        <div class="box">Hello World!</div>
</div>

.wrap {
    border: 1px solid black;
    width: 400px;
    height: 400px;
}
.box {
    background-color: blue;
}
.wrap {
    /* font-size: 0; */
    line-height: 400px;
    text-align: center;
}
.box {
    display: inline-block;
    font-size: 20px;
    vertical-align: middle;
    line-height: initial;
    text-align: center;
}

css-table

<div class="wrap">
        <div class="box">Hello World!</div>
</div>

.wrap {
    border: 1px solid black;
    width: 400px;
    height: 400px;
}
.box {
    background-color: blue;
}
.wrap {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.box {
    display: inline-block;
}

writing-mode

writing-mode不常见，用它来实现居中的方法也有点难理解，这里推荐一篇博客。 欢迎大家访问这篇博客

以上就是子元素宽高未知的情况下居中的一些方法，下面来看一下宽高已知的方法。

absolute + margin

<div class="wrap">
        <div class="box size">Hello World!</div>
</div>

.wrap {
    border: 1px solid black;
    width: 400px;
    height: 400px;
}
.box {
    background-color: blue;
}
.box.size{
    width: 150px;
    height: 150px;
}

/* 第一种 */
.wrap {
    position: relative;
}
.box {
    position: absolute;
    top:50%;
    left:50%;
    margin-top: -75px;
    margin-left: -75px;
    text-align: center;
}

/* 第二种 */
.wrap {
    position: relative;
}
.box {
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    text-align: center;
}

absolute + calc

<div class="wrap">
        <div class="box size">Hello World!</div>
</div>

.wrap {
    border: 1px solid black;
    width: 400px;
    height: 400px;
}
.box {
    background-color: blue;
}
.box.size{
    width: 150px;
    height: 150px;
}
.wrap {
    position: relative;
}
.box {
    position: absolute;
    top:  calc(50% - 75px);
    left: calc(50% - 75px);
    text-align: center;
}

补充

以上这些方法都是子元素在父元素中水平垂直居中，单这还不够。如果我们想要整个容器在浏览器中水平垂直居中，并且可以随着浏览器缩放，那有如何呢？

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

.box {
        width: 400px;
        height: 400px;
        position: absolute;
        top:50%;
        left:50%;
        margin-left: -200px;
        margin-top: -200px;
        background-color: red;
}

总结

对于居中方法，我个人是比较喜欢用flex和absolute + margin这两类方法。代码简单明了，通俗易懂，兼容性也不错。当然，仁者见仁智者见智，只要实现了居中就可以了。（本文是参考了一些前辈的文章，再加上自己的一些理解，不足之处请见谅！）