CSS不定宽⾼的垂直⽔平居中（9种⽅法）
垂直居中，在 CSS 中是⼀个⽼⽣常谈的问题，⾯试的时候也会时常被提及。所以，今天我们就来聊聊 9 种不同的居中⽅法。
有常见的 flex、transform、absolute 等等。也有 CSS3 的⽹格布局。还有伪元素的⽅法，是的，你没有看错，::after 和 ::before 也可以实现居中。
9 种⽅法呈现
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）。
.wrapper {
width: 300px;
height: 300px;
border: 1px solid #ccc;
position: relative;
}
.wrapper > p {
width: 172px;
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
像表格⼀样，⽹格布局让我们能够按⾏或列来对齐元素。 然⽽在布局上，⽹格⽐表格更可能做到或更简单。
.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%;div中的div居中
}
.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 写法，所以不存在兼容性的风险。总结
今天共介绍了 9 种居中的⽅法。像 flex、absolute、grid，这些常⽤的⽅法往往可以在⼯作中，帮我们解决布局的问题。⽽像 writing-mode、::after、::before，这些神奇的特性仿佛帮我们掀开了 CSS 魔法
⼤陆的⼀⾓，让⼈神往，忍不住想去探索更多。
想要了解更多前端相关知识，可访问 ！！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。