水平垂直居中
2022年6月13日大约 3 分钟
基本代码
块级元素
注：把宽、高、边框、背景色作为内联样式，便于直观理解实现垂直和水平居中的 CSS 代码。
<div style="width:200px; height:200px; border:1px solid black" class="parent">
<div style="width:100px; height:100px; background:red" class="child">文字</div>
</div>
行内元素
行内元素不设置宽高
<div style="width:200px; height:200px; border:1px solid black" class="parent">
<span style="background:red" class="child">文字</span>
</div>
CSS 代码
* {
box-sizing: border-box
}
水平居中
行内元素
单行/多行文字
.parent {
text-align: center;
}
效果图：
块级元素
1. flex
.parent {
display: flex;
justify-content: center;
}
效果图：
2. margin: auto
.child {
margin: auto; /* 盒子外水平居中 */
}
效果图：
.child {
text-align: center; /* 盒子内水平居中 */
margin: auto;
}
效果图：
3. 绝对定位
需要提前知道
child的尺寸
（1）left: 50% + margin-left: -宽度的一半
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
margin-left: -50px;
}
（2）left/right: 0 + margin: auto
.parent {
position: relative;
}
.child {
position: absolute;
left: 0;
right: 0;
margin: auto;
}
（3）left: 50% + transform
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}
效果图均为：
垂直居中
行内元素
单行文字
line-height: height （行高=父高）
主要用于文字的排版，也可以用于图片元素居中
.child {
line-height: 200px;
}
效果图：
多行文字
table-cell + inline-block + vertical-align: middle
<div style="width:200px; height:200px; border:1px solid black" class="parent">
<span style="background:red" class="child">多行文字<br>多行文字<br>多行文字<br>多行</span>
</div>
.parent {
display: table-cell;
vertical-align: middle;
}
.child {
display: inline-block;
vertical-align: middle;
}
效果图：
块级元素
1. flex
只要不考虑兼容 IE，flex 一把梭。
.parent {
display: flex;
align-items: center;
}
2. table-cell
.parent {
display: table-cell;
vertical-align: middle;
}
3. 绝对定位
需要提前知道
child的尺寸
（1）top: 50% + margin-top: -高度的一半
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
margin-top: -50px;
}
（2）top/bottom: 0 + margin: auto
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
（3）top: 50% + transform
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
效果图均为：
4. 伪元素
:before、:after 必须都写
.parent {
text-align: center;
}
.child {
display: inline-block;
vertical-align: middle;
}
.parent::before {
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;
}
.parent::after {
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;
}
效果图：
5. table 标签
不推荐使用
<table class="parent">
<tr>
<td class="child">
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
</td>
</tr>
</table>
.parent{
border: 1px solid black;
height: 200px;
width: 200px;
}
.child{
background: red
}
效果图：（table 标签自带 2px 空隙）