结合CSS3的新特性来总结垂直居中的实现方法

前端  /  管理员 发布于 7年前   126

0.单行内容的居中
只考虑单行是最简单的，无论是否给容器固定高度，只要给容器设置 line-height 和 height，并使两值相等，再加上 over-flow: hidden 就可以了

CSS Code复制内容到剪贴板

1. .middle-demo-1{   
2. height: 4em;   
3. line-height: 4em;   
4. overflow: hidden;   
5. }  

优点：
（1）. 同时支持块级和内联极元素
（2）. 支持所有浏览器
缺点：
（1）. 只能显示一行
（2）. IE中不支持<img>等的居中
要注意的是：
（1）. 使用相对高度定义你的 height 和 line-height
（2）. 不想毁了你的布局的话，overflow: hidden 一定要
为什么？
请比较以下两个例子：

XML/HTML Code复制内容到剪贴板

1. <p style="background: #900; color: #00f; font: bold 12px/24px Helvertica,Arial,sans-serif; height:24px; width:370px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>  
2. <br/>  
3. <br/>  
4. <p style="background: #090; color: #00f; font: bold 12px/2em Helvertica,Arial,sans-serif; height:2em; width:370px; overflow: hidden;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>  

上一个高度是用的绝对单位px，并且没有隐藏溢出，下一个高度用的单位是相对单位em，并且隐藏了溢出。如果你的浏览器支持放大字体，那么尽情地放大字体，看看会出现什么效果。

1.使用position:absolute（fixed）,设置left、top、margin-left、margin-top的属性;

CSS Code复制内容到剪贴板

1. .box{   
2.     position:absolute;/*或fixed*/  
3.     top:50%;   
4.     left:50%;   
5.     margin-top:-100px;   
6.     margin-left:-200px;   
7. }  

2.利用position:fixed（absolute）属性，margin:auto这个必须不要忘记了;

CSS Code复制内容到剪贴板

1. .box{   
2.     position: absolute;或fixed  
3.     top:0;   
4.     rightright:0;   
5.     bottombottom:0;   
6.     left:0;   
7.     margin: auto;   
8. }  

3.利用display:table-cell属性使内容垂直居中;

CSS Code复制内容到剪贴板

1. .box{   
2.   
3. display:table-cell;   
4.   
5. vertical-align:middle;   
6.   
7. text-align:center;   
8.   
9. width:120px;   
10.   
11. height:120px;   
12.   
13. background:purple;   
14.   
15. }  

4.使用css3的新属性transform:translate(x,y)属性;

CSS Code复制内容到剪贴板

1. .box{   
2.     position: absolute;   
3.     transform: translate(50%,50%);   
4.     -webkit-transform:translate(50%,50%);   
5.     -moz-transform:translate(50%,50%);   
6.     -ms-transform:translate(50%,50%);   
7. }  

5.最高大上的一种，使用:before元素;

CSS Code复制内容到剪贴板

1. .box{   
2.   
3. position:fixed;   
4.   
5. display:block;   
6.   
7. background:rgba(0,0,0,.5);   
8.   
9. }   
10.   
11. .box:before{   
12.   
13. content:'';   
14.   
15. display:inline-block;   
16.   
17. vertical-align:middle;   
18.   
19. height:100%;   
20.   
21. }   
22.   
23. .box.content{   
24.   
25. width:60px;   
26.   
27. height:60px;   
28.   
29. line-height:60px;   
30.   
31. color:red;  

6.Flex布局;

CSS Code复制内容到剪贴板

1. .box{   
2.     display: -webkit-box;   
3.     display: -webkit-flex;   
4.     display: -moz-box;   
5.     display: -moz-flex;   
6.     display: -ms-flexbox;   
7.     display: flex;   
8.     水平居中   
9.     -webkit-box-align: center;   
10.     -moz-box-align: center;   
11.     -ms-flex-pack:center;   
12.     -webkit-justify-content: center;   
13.     -moz-justify-content: center;   
14.     justify-content: center;   
15.      垂直居中    
16.     -webkit-box-pack: center;   
17.     -moz-box-pack: center;   
18.     -ms-flex-align:center;   
19.     -webkit-align-items: center;   
20.     -moz-align-items: center;   
21.     align-items: center;   
22. }