CSS样式：垂直居中的方法总结

1 单行的行内元素

.father{
		width:400px;
		height:200px;
		background:pink;
		}
.son{
	/* 子级可以继承父级line-height，给予父级ling-height也可以实现垂直居中 */
		line-height:200px;	
		background:orange;
		}
<div class="father">
	<span class="son">我是单行的行内元素</span>
</div>

效果如图：

2 多行的行内元素

使用给父元素设置display:table-cell;和vertical-align: middle;属即可；

.father{
		width:400px;
		height:200px;
		background:pink;
		display:table-cell;
		vertical-align:middle;
		}
.son{
	background:orange;
	}
<div class="father">
	<span class="son">我是单行的行内元素我是单行的行内元素我是单行的行内元素我是单行的行内元素我是单行的行内元素我是单行的行内元素我是单行的行内元素我是单行的行内元素我是单行的行内元素我是单行的行内元素我是单行的行内元素我是单行的行内元素我是单行的行内元素</span>
</div>

效果如图：

3 块级元素

方案一：使用定位

<div class="father">
	<div class="son">我是单行的行内元素我是单行的行内元素我是单行的行内元素</div>
</div>

首先设置父元素为相对定位，再设置子元素为绝对定位。

.father{
	width:400px;
	height:200px;
	background:pink;
	position:relative;
 	}

方法一：定位元素居中（上下为0居中）

.son{
	width:160px;
	height:100px;
	background:orange;
	position:absolute;
	top:0;
	bottom:0;
	margin:auto 0;
	}

方法二：定位元素居中（拉伸法）

.son{
		width:160px;
		height:100px;
		background:orange;
		position:absolute;
		top:50%;
		margin-top:-50px;
		}

方法三：使用transform函数

.son{
	width:160px;
	height:100px;
	background:orange;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	}

效果图：

方案二：使用flexbox布局实现（高度定不定都可以）

.father{
	width:400px;
	height:200px;
	background:skyblue;
	display:flex;
	align-items:center;
	}
.son{
	width:160px;
	height:100px;
	background:yellow;
	}
<div class="father">
	<div class="son">我是单行的行内元素我是单行的行内元素我是单行的行内元素</div>
</div>

效果图：