CSS 垂直居中的方法

 CSS 垂直居中的8个方法

1.行内高 line-height    

html代码:

[html]  view plain  copy

1. <div class="lineHeight-box">  
2.         <div class="lineHeight-content">  
3.             line-Height垂直居中  
4.         </div>  
5.     </div>  

css代码:

[css]  view plain  copy

1. .lineHeight-box{  
2.     width: 300px;  
3.     height: 200px;  
4.     line-height: 200px;  
5.     background-color: #FFFFCC;  
6. }  
7. .lineHeight-content{  
8.     text-align: center;  
9. }  

优点：适用所有浏览器
缺点： 只对文本内容垂直居中，内容较多时，不好显示。

2.浮动float                  

html代码:

[html]  view plain  copy

1. <div class="float-box">  
2.         <div class="floater"></div>  
3.         <div class="float-content">  
4.             float垂直居中  
5.         </div>  
6.     </div>  

css代码:

[css]  view plain  copy

1. <pre name="code" class="css"><pre name="code" class="html">.float-box{  
2.     width: 300px;  
3.     height: 200px;  
4.     background-color: #99CCCC;  
5. }  
6. .floater{  
7.     float: left;  
8.     height: 50%;  
9.     width: 100%;  
10. }  
11. .float-content{  
12.     clear: both;  
13.     height: 100px;  
14.     text-align: center;  
15. }  

优点：适用所有浏览器，适用于各种盒子模型的块元素，可用于被垂直容器不确定高度时，宽度不够时，不影响排版。

缺点：存在多余、没有语义作用的空标签，这就不符合html seo的优化规范，例子中的.floater

3.绝对定位 absolute     

html代码:

[html]  view plain  copy

1. <div class="absulote-box">  
2.         <div class="absulote-content">  
3.             absolute绝对定位 垂直居中  
4.         </div>  
5.     </div>  

css代码:

[css]  view plain  copy

1. .absulote-box{  
2.     background-color: #FF9999;  
3.     width: 300px;  
4.     height: 200px;  
5.     position: relative;  
6. }  
7. .absulote-content{  
8.     position: absolute;  
9.     top: 50%;  
10.     text-align: center;  
11.     width: 100%;  
12. }  

优点：适用所有浏览器，适用于各种盒子模型的块元素，可用于被垂直容器不确定高度。

缺点：宽度不够时，排版有影响。

4.绝对定位 absolute +margin:auto

html代码:

[html]  view plain  copy

1. <div class="margin-box">  
2.         <div class="margin-content">  
3.             absolute+margin垂直居中  
4.         </div>  
5.     </div>  

css代码:

[css]  view plain  copy

1. .margin-box{  
2.     background-color: #CC9966;  
3.     width: 300px;  
4.     height: 200px;  
5.     position: relative;  
6. }  
7. .margin-content{  
8.     position: absolute;  
9.     top: 0;  
10.     bottom: 0;  
11.     left: 0;  
12.     right: 0;  
13.     width: 184px;  
14.     height: 16px;  
15.     margin: auto;  
16. }  

优点：用起来方便，不费劲。

缺点：不兼容IE8以下浏览器，宽度不够时，排版有影响。

5.绝对定位 absolute +css3:

html代码:

[html]  view plain  copy

1. <div class="absuloteCss3-box">  
2.         <div class="absuloteCss3-content">  
3.             absulote+Css3垂直居中  
4.         </div>  
5.     </div>  

css代码:

[css]  view plain  copy

1. .absuloteCss3-box{  
2.     position: relative;  
3.     width: 300px;  
4.     height: 200px;  
5.     background-color: #99CC99;  
6. }  
7. .absuloteCss3-content{  
8.     position: absolute;  
9.     left: 50%;  
10.     top:50%;  
11.     width: 172px;  
12.     transform: translate(-50%, -50%);  
13. }  

优点：可用于被垂直容器不确定高度。

缺点：IE低版本浏览器不兼容css3的transform元素。

6.内边距 padding

html代码:

[html]  view plain  copy

1. <div class="padding-box">  
2.         <div class="padding-content">padding垂直居中</div>  
3.     </div>  

css代码:

[css]  view plain  copy

1. .padding-box {  
2.     background-color: #CCCC99;  
3.     width: 300px;  
4.     padding: 2% 0;  
5.     text-align: center;  
6. }  
7. .padding-content{  
8.     padding: 18% 0;  
9. }  

优点：更简单，更方便。

缺点：如果父容器有多个子元素需要排版的时候，其他的子元素就不好排版了。

7.table格式

html代码:

[html]  view plain  copy

1. <div class="table-box">  
2.         <div class="table-content">table垂直居中</div>  
3.     </div>  

css代码:

[css]  view plain  copy

1. .table-box {  
2.     display: table;  
3.     background-color: #FFCCCC;  
4.     height: 200px;  
5.     width: 300px;  
6.     /*兼容IE低版本*/  
7.     /*display: inline-block;*/  
8. }  
9. .table-content {  
10.     display: table-cell;  
11.     vertical-align: middle;  
12.     text-align: center;  
13. }  

优点：可用于被垂直容器不确定高度 。

缺点：IE低版本浏览器不兼容 ，嵌套很多无效标签。

8.flex盒子布局

html代码:

[html]  view plain  copy

1. <div class="flex-box">  
2.         <div class="flex-content">flex垂直居中</div>  
3.     </div>  

css代码:

[css]  view plain  copy

1. .flex-box{  
2.     /*新版本标签*/  
3.     display: flex;  
4.     /*旧版本标签 Safari仍旧需要使用特定的浏览器前缀*/  
5.     display: -webkit-flex;  
6.     /*flex 盒子布局水平居中*/  
7.     justify-content: center;  
8.     /*flex 盒子布局垂直居中*/  
9.     align-items: center;  
10.     background-color: #99CCFF;  
11.     width: 300px;  
12.     height: 200px;  
13. }  
14. .flex-content{  
15.     text-align: center;  
16.     margin: 0 auto;  
17. }  

优点：排版方式比其他的更简单粗暴，适用于webkit内核浏览器和各种移动设备上。

缺点：很多浏览器不兼容 。