前言：
垂直居中有很多方式，我们要做的不是写出完美代码，而是在合适的情况下根据需求选择合适方式。
主要方式：
- line-height
- 绝对定位
- 表格 display：table-cell
主要需求：
- 固定宽高
- 不固定宽高
主要兼容：
- ie8+ 主流浏览器
- ie6,7
行高
1. 利用行高与高度相同，实现单行文本居中
缺点：只能是单行文本
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 <style type="text/css">
6 .d1{width: 200px;height: 200px;background-color: blue;line-height: 200px;}
7 </style>
8 </head>
9 <body>
10 <div class="d1">
11 fdsfdsfdsfdfsfds
12 </div>
13 </body>
14 </html>
效果预览
2.利用inline-block改进（推荐）
改变display属性，就可以是块元素了，vertical-align: middle;设置垂直属性
优点：自适应内容
兼容：>=ie8 + 主流
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 </head>
6 <style type="text/css">
7 .div1{
8 width: 500px;height: 500px;
9 background-color: blue;
10 text-align: center;
11 line-height: 500px;
12 }
13 .div2{
14 display: inline-block;
15 vertical-align: middle;
16 width: 200px;
17 height: 200px;
18 background-color: red;
19 /*通过 line-hight 来垂直居中 此法>= ie8*/
20 }
21 </style>
22 <body>
23 <div class="div1">
24 <div class="div2">
25
26 </div>
27 </div>
28 </body>
29 </html>
效果预览
绝对定位
1.负margin
top，left 50%；margin -50%；
缺点：需固定宽高
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 </head>
6 <style type="text/css">
7 .div1{
8 width: 500px;height: 500px;
9 background-color: blue;
10 position: relative;
11 }
12 .div2{
13 position: absolute;
14 width: 200px;
15 height: 200px;
16 background-color: red;
17 top: 50%;
18 left: 50%;
19 margin-left: -100px; /*此处为width的一半，所以应用此法，元素必须固定宽、高*/
20 margin-top: -100px;
21
22 }
23 </style>
24 <body>
25 <div class="div1">
26 <div class="div2">
27 fdsfsdffdf
28 fdsfdsfsdff
29 </div>
30 </div>
31 </body>
32 </html>
效果预览
2.css3 translate
我们希望实现不固定宽高，在上法上改进。可以用js，动态添加宽高，但不推荐。其实可以用css3 translate属性，因为translate是唯一一个相对于自身宽度计算的属性
兼容：>=ie9 + 主流
优点：自适应内容
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 </head>
6 <style type="text/css">
7 .div1{
8 width: 500px;height: 500px;
9 background-color: blue;
10 position: relative;
11 }
12 .div2{
13 position: absolute;
14 background-color: red;
15 top: 50%;
16 left: 50%;
17 transform:translate(-50%,-50%);
18 /*应用css3 translate属性是相对于自身的，此法>=ie9，且宽高自适应*/
19 }
20 </style>
21 <body>
22 <div class="div1">
23 <div class="div2">
24 fdsfsdffdf
25 fdsfdsfsdff
26 </div>
27 </div>
28 </body>
29 </html>
效果预览
3.绝对定位 + 相对定位（推荐）
思想与上面的方式是一样，只是这是基于ie6,7的bug，相对定位位移父元素的50%
缺点：多添加一个容器标签
优点：自适应内容
兼容：ie6,7
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 <style type="text/css">
6 .middle-demo-4{
7 background-color: blue;
8 height: 300px;
9 width: 300px;
10 position: relative;
11 }
12 .middle-demo-4 div{
13 position: absolute;
14 top: 50%;
15 left: 50%;
16 }
17 .middle-demo-4 div div{
18 height: 200px;
19 background-color: red;
20 position: relative;
21 top: -50%;
22 left: -50%;
23 }/*ie6 ie7*/
24 </style>
25 </head>
26 <body>
27 <div class="middle-demo-4">
28 <div>
29 <div>dsfdsfdsfdsfdsfdsfdsf</div>
30 </div>
31 </div>
32
33 </body>
34 </html>
效果预览
4.margin：auto
绝对定位下，固定宽高，top：0，bottom：0，会自适应内容，多余部分会用margin填充
缺点：固定宽高
兼容：>=ie8
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 </head>
6 <style type="text/css">
7 .div1{
8 width: 500px;height: 500px;
9 background-color: blue;
10 position: relative;
11 }
12 .div2{
13 margin: auto;
14 position: absolute;
15 background-color: red;
16 width: 200px;
17 height: 200px;
18 left: 0;
19 right: 0;
20 top: 0;
21 bottom: 0;
22
23 }
24 </style>
25 <body>
26 <div class="div1">
27 <div class="div2">
28 fdsfsdffdf
29 fdsfdsfsdff
30 </div>
31 </div>
32 </body>
33 </html>
结果预览
表格
1.table-cell（推荐）
单元格可以设置垂直属性 vertical-align: middle;
优点：自适应内容
兼容：>=ie8 +主流
缺点：子元素为浮动、绝对定位无效（注意）
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 </head>
6 <style type="text/css">
7 .div1{
8 width: 500px;height: 500px;
9 background-color: blue;
10 display: table-cell;
11 vertical-align: middle;
12 text-align: center;
13 }
14 .div2{
15 /*float: left;position: absolute; 子元素为浮动、绝对定位无效
16 此法>=ie8
17 */}
18 </style>
19 <body>
20 <div class="div1">
21 <div class="div2">
22 fdsfsdffdf
23 fdsfdsfsdff
24 </div>
25 </div>
26 </body>
27 </html>
结果预览
总结
根据兼容性和自适应内容来考虑 表格/行高法 + 相对定位法
如果固定宽高 负margin法
时间： 2024-07-28 13:52:47