css div内容垂直居中

css div内容垂直居中：

1.vertical-align
vertical-align只能作用在inline-block或者inline，还有table-cell等元素内

<div style="vertical-align:middle;display:table-cell;">
	<p>文本居中</p>
</div>

2.line-height

p{
	height:30px;
	line-height:30px;
	width:100px;
	overflow:hidden;
}

3.css3 transform

.center-vertical{ //垂直
    position:relative;
    top:50%;
    transform:translateY(-50%);
}
.center-horizontal{ //水平
	position:relative;
	left:50%;
	transform:translateX(-50%);
}

4.flex

.flex{
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:justify;
	width:200px;
	height:200px;
	background:red;
	color:#fff;
}