总结一下几种主流布局中垂直居中对齐的不同实现方案以及方案之间的比较。
父 display:table-cell + 父 vertical-align:middle
代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#parent {
width: 200px;
height: 600px;
background-color: aliceblue;
display: table-cell;
vertical-align: middle;
}
#child {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="parent">
<div id="child"></div>
</div>
</body>
</html>
|
原理
vertical-align
CSS 的属性 vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。
注意 vertical-align 只对行内元素、表格单元格元素生效：不能用它垂直对齐块级元素。
具体vertical-align的取值可以去看MDN，这里只提一点，就是对于行内元素和表格单元，它的取值范围不完全相同，就算相同的值也会有不同的意义。
display
这个属性在上一篇博客中介绍过了，这一次我们用的是它的table-cell值
该值会让当前元素表现得像一个td一样。而td的内容可以是水平居中，也可以是垂直居中。
优点
兼容性好
缺点
vertical-align具有继承性
代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#parent {
width: 200px;
height: 600px;
background-color: aliceblue;
position: relative;
}
#child {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
transform: translateY(-50%);
top: 50%;
}
</style>
</head>
<body>
<div id="parent">
<div id="child"></div>
</div>
</body>
</html>
|
原理，优点，缺点
这个原理可以去看我的上一篇博客中讲水平居中的方案二相同。