css+div垂直居中布局总结（3种方案）

子元素于父元素垂直居中且其（ 子元素与父元素） 高度均可变

方案一：table-cell + vertical-align  优点：兼容性好（ 支持 IE 8）

<div class="parent">
	<div class="child">文字</div>
</div>
<style>
	.parent{
		display: table-cell;
		vertical-align: middle;
	}
</div>

方案二：absolute + transform    注：transform 为 CSS3 属性，有兼容性问题

<div class="parent">
	<div class="child">文字</div>
</div>
<style>
	.parent{
		position:relative;
		
	}
	.child{
		display:absolute;
		top: 50%;
		transition: translateY(-50%);
	}
</style>

方案三：flex + align-items   注：只需设置父节点属性，无需设置子元素，有兼容性问题

<div class="parent">
	<div class="child">文字</div>
</div>
<style>
	.parent{
		display: flex;
		align-items: center;
	}
</style>