水平垂直居中的各种实现方式
在写这篇前，自己只能想起 4、5 种方式。刷了下掘金 …… 此刻的我只想吐槽一句，你们好卷啊！
仅居中元素定宽高适用
1. absolute + 负 margin
1-absolute+负margin
html
<div class="center-wrapper">
<div class="wp">
<div class="box size">123123</div>
</div>
</div>1
2
3
4
5
2
3
4
5
css
.wp {
position: relative;
}
.box {
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -60px;
}1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
2. absolute + margin auto
2-absolute+margin-auto
html
<div class="center-wrapper">
<div class="wp">
<div class="box size"></div>
</div>
</div>1
2
3
4
5
2
3
4
5
css
.wp {
position: relative;
}
.box {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
3. absolute + calc
3-absolute+calc
html
<div class="center-wrapper">
<div class="wp">
<div class="box size"></div>
</div>
</div>1
2
3
4
5
2
3
4
5
css
.wp {
position: relative;
}
.box {
position: absolute;
left: calc(50% - 100px);
top: calc(50% - 50px);
}1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
居中元素不定宽高适用
4. absolute + transform
absolute + transform
html
<div class="center-wrapper">
<div class="wp">
<div class="box"></div>
</div>
</div>1
2
3
4
5
2
3
4
5
css
.wp {
position: relative;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
5. writing-mode
不常用了解即可
writing-mode
html
<div class="center-wrapper">
<div class="wp">
<div class="wp-inner">
<div class="box">writing-mode</div>
</div>
</div>
</div>1
2
3
4
5
6
7
2
3
4
5
6
7
css
.wp {
writing-mode: vertical-lr;
text-align: center;
}
.wp-inner {
writing-mode: horizontal-tb;
display: inline-block;
text-align: center;
width: 100%;
}
.box {
display: inline-block;
margin: auto;
text-align: left;
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
6. lineheight
line-height
html
<div class="center-wrapper">
<div class="wp">
<div class="box">line-height</div>
</div>
</div>1
2
3
4
5
2
3
4
5
css
.wp {
line-height: 300px;
text-align: center;
font-size: 0px;
}
.box {
font-size: 16px;
display: inline-block;
vertical-align: middle;
line-height: initial;
}1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
7. table
利用Table实现居中 |
html
<div class="center-wrapper">
<table>
<tbody>
<tr>
<td class="wp">
<div class="box">利用Table实现居中</div>
</td>
</tr>
</tbody>
</table>
</div>1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
css
.wp {
text-align: center;
}
.box {
display: inline-block;
}1
2
3
4
5
6
2
3
4
5
6
8. table-cell
和 VitePress 的样式有冲突，这里就不贴了
9. flex
display: flex;
justify-content: center;
align-items: center;
html
<div class="center-wrapper">
<div class="wp">
<div class="box">
<div>display: flex;</div>
<div>justify-content: center;</div>
<div>align-items: center;</div>
</div>
</div>
</div>1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
css
.wp {
display: flex;
justify-content: center;
align-items: center;
}1
2
3
4
5
2
3
4
5
10. grid
display: grid;
justify-self: center;
align-self: center;
html
<div class="center-wrapper">
<div class="wp">
<div class="box">display: grid;</div>
<div class="box">align-self: center;</div>
<div class="box">justify-self: center;</div>
</div>
</div>1
2
3
4
5
6
7
2
3
4
5
6
7
css
.wp {
display: flex;
justify-content: center;
align-items: center;
}1
2
3
4
5
2
3
4
5
参考
- CSS 实现水平垂直居中的 10 种方式 https://juejin.cn/post/6844903679242305544
- 文章的 github demo https://github.com/yanhaijing/vertical-center