css div内容垂直居中

   在写前端页面时总是会遇到div内容垂直居中！！！每次都各种百度，解决了也只记得当下，再次遇到还是找度娘！！！（敲打自己）

一、对于“单行”的文字内容

<div class="example">
	<p>这是一行文字</p>
</div>

   一般利用行高（line-height）法或者内边距（padding）法就能搞定。

1、行高法

.example {
	// 省略其他样式 ...
	height: 200px;
	line-height: 200px; // 必须和 height 相同！
}

2、内边距法

p {
	padding: 90px 0; // 要根据 div 的高度大致估量下
}

另外，关于"padding"：

• padding: 2px; // 上右下左
• padding: 1px 2px; // 上下 右左
• padding: 1px 2px 3px; //上 右左 下

二、重点是针对多行文字！！！

（再次敲打自己！）

1、table法

<div class="example">
	/* 使用table必须再嵌套一层div */
	<div class="text">
		<p>这是一行文字</p>
		<p>这是一行文字</p>
		<p>这是一行文字</p>
	</div>
</div>

.example {
	// 省略其他样式 ...
	display: table;
}
.text {
	display:table-cell;
	vertical-align:middle; // 设置元素垂直排列
}

2、box方法

<div class="example">
	<p>这是一行文字</p>
	<p>这是一行文字</p>
	<p>这是一行文字</p>
</div>

.example {
	// 省略其他样式 ...
	width: 300px;
  	height: 200px;

	/* Safari, Opera, and Chrome */
  	display: -webkit-box;
  	-webkit-box-orient: vertical;// 垂直排列 （horizontal水平）
  	-webkit-box-pack: center;// 水平轴
  	-webkit-box-align: center; // 竖轴
  	
  	/* Firefox */
  	display: -moz-box;
  	-moz-box-orient: vertical;
  	-moz-box-pack: center;
  	-moz-box-align: center;
  
  	/* Internet Explorer 10 */
	display:-ms-flexbox;
	-ms-flex-orient: vertical;
	-ms-flex-pack:center;
	-ms-flex-align:center;
  
  	/* W3C */
  	display: box;
  	box-orient: vertical;
  	box-pack: center;
  	box-align: center;
}