沐光

记录在前端之路的点点滴滴

水平垂直居中

前言

在面试中,面试官考察 CSS 方面的内容时,比较常见的一个问题就是水平垂直居中问题。其实不仅仅是面是,在工作中也常常会遇到这样的布局,因此对于一些常见的水平垂直居中的方法,在此做了一番总结,以作备忘。

块级元素的水平垂直居中定位

对于块级元素的垂直居中定位,我们处理的方法有很多,就以下公共模板做讨论:

1
2
3
<div class="parent parent-special">
<div class="child child-common"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.parent {
background-color: black;
position: relative;
height: 400px;
width: 400px;
}

.parent-special {}

.child {}

.child-common {
background-color: red;
}

position + margin

定位配合 margin 来实现的方法比较简单粗暴,由于子元素有定宽定高的限制,因此适用于一些简单的布局,比如弹框之类的(这里仅讨论绝对定位)。

1
2
3
4
5
6
7
8
.child {
height: 100px;
width: 100px;
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -50px;
}

position + transform

前面的方法对于子元素大小固定的情况可以适用,但是对于子元素大小不固定的情况却没法处理,好在 CSS3 的新属性 transform 能帮我们解决这个问题

1
2
3
4
5
6
7
8
.child {
position: absolute;
top: 50%;