CSS实现文字垂直居中

一、问题描述： 当高度固定或不固定时，单行或多行文本难以实现垂直居中；

二、解决方法：

1、使用line-height属性，将line-height设置与元素高度等高。

局限性：只适用于单行文本，局限性大。

代码：

.box {
	height: 100px;
	line-height: 100px;
	white-space: nowrap;
}

2.padding：设置相等的上下padding值。

局限性：有高度限制时不能垂直居中。

代码：

.box{
	padding-top: 30px;
	padding-bottom: 30px;
}

3.绝对定位居中：top:0; bottom:0; left:0; right:0; margin:auto;

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

优点：支持响应式，只有这种方法在resize之后仍然垂直居中

缺点：使用绝对定位时元素必须有明确高度，没有显式设置overflow时，内容超过元素高度时会溢出，没有滚动条。IE浏览器不支持

代码：

.box{/*display:none;*/
	position:absolute;
	width:200px;
	height