「干货」CSS 不定宽高的垂直水平居中（最全 9 种）

前言

垂直居中，在 CSS 中是一个老生常谈的问题，面试的时候也会时常被说起。因此，今天咱们就来聊聊 9 种不一样的居中方法。

有常见的 flex、transform、absolute 等等。也有 CSS3 的网格布局。还有伪元素的方法，是的，你没有看错，::after 和 ::before 也能够实现居中。

9 种方法呈现

一、flex

你们的第一反应，可能就是 flex 了。由于它的写法够简单直观，兼容性也没什么问题。是手机端居中方式的首选。

<div class="wrapper flex-center">
    <p>horizontal and vertical</p>
</div>
复制代码

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
复制代码

利用到了 2 个关键属性：justify-content 和 align-items，都设置为 center，便可实现居中。

须要注意的是，必定要把这里的 flex-center 挂在父级元素，才能使得其中 惟一的 子元素居中。

二、flex + margin

这是 flex 方法的变种。父级元素设置 flex，子元素设置 margin: auto;。能够理解为子元素被四周的 margin “挤” 到了中间。

<div class="wrapper">
    <p>horizontal and vertical</p>
</div>
复制代码

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;

    display: flex;
}

.wrapper > p {
    margin: auto;
}
复制代码

三、transform + absolute

这个组合，经常使用于图片的居中显示。

<div class="wrapper">
    <img src="test.png">
</div>
复制代码

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    position: relative;
}

.wrapper > img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
复制代码

固然，也能够将父元素 wrapper 的相对定位，移入子元素 img 中，替换掉绝对定位。效果是同样的。

四、table-cell

利用 table 的单元格居中效果展现。与 flex 同样，须要写在父级元素上。

<div class="wrapper">
    <p>horizontal and vertical</p>
</div>
复制代码

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;

    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
复制代码

五、absolute + 四个方向的值相等

使用绝对定位布局，设置 margin:auto;，并设置 top、left、right、bottom 的 值相等便可（不必定要都是 0）。

<div class="wrapper">
    <p>horizontal and vertical</p>
</div>
复制代码

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    position: relative;
}

.wrapper > p {
    width: 170px;
    height: 20px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
复制代码

这种方法通常用于弹出层，须要设置弹出层的宽高。

六、writing-mode

这个方法能够改变文字的显示方向，好比让文字的显示变为垂直方向。

<div class="wrapper">
    <div class="wrapper-inner">
        <p>horizontal and vertical</p>
    </div>
</div>
复制代码

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;

    writing-mode: vertical-lr;
    text-align: center;
}

.wrapper > .wrapper-inner {
    writing-mode: horizontal-tb;
    display: inline-block;
    text-align: center;
    width: 100%;
}

.wrapper > .wrapper-inner > p {
    display: inline-block;
    margin: auto;
    text-align: left;
}
复制代码

兼容性上还有些小瑕疵，但大部分浏览器，包括手机端已支持 writing-mode 的写法了。

七、grid

像表格同样，网格布局让咱们可以按行或列来对齐元素。 然而在布局上，网格比表格更可能作到或更简单。

<div class="wrapper">
    <p>horizontal and vertical</p>
</div>
复制代码

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;

    display: grid;
}

.wrapper > p {
    align-self: center;
    justify-self: center;
}
复制代码

但它在兼容性上不如 flex，特别是 IE 浏览器，只支持 IE10 及以上。

八、::after

伪元素也能用来实现居中么？感受仍是挺神奇的，看下面这个例子：

<div class="wrapper">
    <img src="test.png">
</div>
复制代码

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;

    text-align: center;
}

.wrapper::after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.wrapper > img {
    vertical-align: middle;
}
复制代码

水平方向很好理解。垂直方向，能够理解为 ::after 把 img 往下拉到了中间。

九、::before

另外一种是配合 font-size: 0; 共同施展的魔法。

<div class="wrapper">
    <img src="test.png">
</div>
复制代码

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;

    text-align: center;
    font-size: 0;
}

.wrapper::before {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    content: '';
    height: 100%;
}

.wrapper > img {
    vertical-align: middle;
    font-size: 14px;
}
复制代码

font-size: 0; 的神秘之处在于，能够消除标签之间的间隙。另外，由于伪元素搭配的，都是最基础的 CSS 写法，因此不存在兼容性的风险。

总结

今天共介绍了 9 种居中的方法。像 flex、absolute、grid，这些经常使用的方法每每能够在工做中，帮咱们解决布局的问题。而像 writing-mode、::after、::before，这些神奇的特性仿佛帮咱们掀开了 CSS 魔法大陆的一角，让人神往，忍不住想去探索更多。

PS：欢迎关注个人公众号 “超哥前端小栈”，交流更多的想法与技术。