CSS中的水平垂直居中有多少种方案

水平垂直居中,是在前端布局中常见的需求,通过本文来详细了解下实现方案有多少种。

基础结构及样式

1
2
3
<div class="parent">
<div class="child"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
.parent {
width: 150px;
height: 150px;
border: 1px solid #999;
}
.child {
box-sizing: border-box;
width: 60px;
height: 60px;
border: 1px solid #999;
}

flex

flexCSS3 中的新特性,意为“弹性布局”。可以很方便的实现比较复杂的布局。如果你还不是很了解 flex 的用法,请阅读这篇文章

1
2
3
<div class="parent" style="display:flex; justify-content:center; align-items:center;">
<div class="child"></div>
</div>

table-cell

1
2
3
<div class="parent" style="display:table-cell; text-align:center; vertical-align:middle;">
<div class="child" style="display:inline-block;"></div>
</div>

定位 + 负margin

这种方案要求知道子级元素的宽和高。

1
2
3
<div class="parent" style="position:relative;">
<div class="child" style="position:absolute; top:50%; left:50%; margin-left:-30px; margin-top:-30px;"></div>
</div>

定位 + transform:translate()

这种方案和上一个方案使用了相同的原理,优势是不需要知道子元素的宽和高。

1
2
3
<div class="parent" style="position:relative;">
<div class="child" style="position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);"></div>
</div>

定位 + margin:auto

1
2
3
<div class="parent" style="position:relative;">
<div class="child" style="position:absolute; top:0; left:0; bottom:0; right:0; margin: auto;"></div>
</div>