css实现文字垂直居中问题

一、问题描述

 当高度固定或者不固定时，单行或者多行文本难以实现垂直居中；

二、产生原因

1、高度不固定，CSS 本身并没有提供相应的 API 支持（确切来说是提供不全）；

2、浏览器不支持；

三、解决方法

方法一：使用line-height居中，将line-height设置与元素高度等高。（固定高度）

优点：简单明了；
缺点：只适用于单行文本，局限性大；
HTML代码：

1. <div class="demo">  

2.     单行文本垂直居中  
3. </div>  

CSS代码：

1. .demo{  

2.     border: 1px solid #000;  
3.     height:64px;

4.     line-height: 64px;  
5. }  

 

方法二：设置相等的上下padding值

HTML代码：

1.<div class="demo">  

2.    手机  
3.</div>  

CSS代码：

1. .demo{  

2.    padding-top: 30px;
3.    padding-bottom: 30px; 

4. } 

方法三：使用绝对定位垂直居中（固定高度）

绝对对位原理：元素在过度受限情况下，将margin设置为auto，浏览器会重算margin的值，过度受限指的是同时设置top/bottom与height或者left/right与width。

优点：支持响应式，只有这种方法在resize之后仍然垂直居中
缺点：使用绝对定位要求元素必须设置明确高度，没有显式设置overflow时，内容超过元素高度时会溢出，没有滚动条。

IE浏览器不支持

 

Css代码：

1. .demo{  

2.    position:absolute; 

3.    top:50%; 

4.    left:0;  
5.   right:0;

6.    margin:auto;
7.    margin-top:-100px; /*-(height+padding)/2*/

8.    width:200px;  
9.  height:200px; 

10. }
 

方法四：负magin-top方式（固定高度，与上述绝对定位垂直居中相似）

已知元素高度后，使用绝对定位将top设置为50%，mergin-top设置为内容高度的一半(height + padding) / 2；内容超过元素高度时需要设置overflow决定滚动条的出现

原理：top：50%元素上边界位于包含框中点，设置负外边界使得元素垂直中心与包含框中心重合；

优点：代码量少、浏览器兼容性高，支持ie6，ie7

缺点：不支持响应式(不能使用百分比、min/max-width)，高度固定。

 

Css代码：

1. .parent { 

2.    position: relative;
3. }

4.  .child {
5.   position: absolute;

6.   height: 100px; 
7.    top: 50%;

8.    margin-top: -50px; /*transform: translateY(-50%);*/  
9.  }

 

方法五：table-cell方式居中

将center元素的包含框display设置为table，center元素的display设置为table-cell，vertical-align设置为middle。
原理：利用表布局特点，vertical-align设置为middle后，单元格中内容中间与所在行中间对齐。
优点：支持任意内容的可变高度、支持响应式布局
缺点： 每一个需要垂直居中的元素都会需要加上额外标签（需要table、table-cell两个额外元素）；
IE浏览器不支持

代码：
Css代码：

1. .container2 { 

2.    display:table;
3.   height:100%;

4.  }
5.  .table_cell{/*将cell垂直居中，如果外层div不为table则tablecell必须有高度*/

6.    display:table-cell;
7.    vertical-align:middle;

8.    }
 

方法六：弹性盒式布局居中

利用弹性盒式布局，将子元素的主轴、侧轴的排列方式都设置为居中对齐

优点：真正的垂直居中布局

缺点：ie11才开始支持弹性布局

Css代码：

1. .is-Flexbox {

2.    display: -webkit-box;
3.  display: -moz-box;

4.   display: -ms-flexbox;
5.    display: -webkit-flex;

6.   display: flex;
7.    -webkit-align-items: center;

8.            align-items: center;  
9.  -webkit-justify-content: center;

10.         justify-content: center;
11.｝

 

四、总结

1、只有单行文本时，可以将line-height设置与元素高度等高
2、外层div与内层div高度均固定时，可以使用设置相等的上下padding值；
3、当高度固定时，可以采用固定高度定位居中：top: 50%;height: 100px;margin-top: -50px;此方法对IE浏览器支持较好；

4、当高度不固定时，可以采用弹性盒式布局居中：display: flex;justify-content: center;此方法操作简单，但ie11才开始支持弹性布局；或者采用table-cell方式居中：dispaly:table;display:table-cell;vertical-align:middle;此方法支持任意内容的可变高度，但操作繁琐，并且IE8以上的浏览器才支持；