CSS 9种方法实现不定宽高的垂直水平居中（干货）

前端  /  管理员 发布于 7年前   255

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

1、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 挂在父级元素，才能使得其中 唯一的 子元素居中。

2、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;}

3、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 中，替换掉绝对定位。效果是一样的。

4、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;}

5、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;}

这种方法一般用于弹出层，需要设置弹出层的宽高。

6、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 的写法了。

7、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 及以上。

8、::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 往下拉到了中间。

9、::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 写法，所以不存在兼容性的风险。

推荐教程：《CSS教程》

以上就是CSS 9种方法实现不定宽高的垂直水平居中（干货）的详细内容，更多请关注其它相关文章！