总结：让内容垂直居中和水平居中的方法

一、让内容垂直居中：

1、设置line-height为height的高度：

<!-- html代码 -->
<div id="box">
	<p id="son">我是一个p标签</p>
</div>

/* css代码 */
#box {
    width: 200px;
    height: 200px;
    line-height: 200px;
    background-color: yellow;
}

结果：                                                                   

2、用padding设置内边距将内容撑到中央:

html代码不变，css代码如下：

#box {
	width: 200px;
	height: 200px;
	background-color: yellow;
	padding: 90px 0;
	box-sizing: border-box;
}

结果同上。                                         

3、模拟表格

html代码不变，css代码如下(给父元素设置，给子元素设置和)：

#box {
	width: 200px;
	height: 200px;
	background-color: yellow;
	display: table;
}
#son {
	display: table-cell;
	vertical-align: middle;
}

结果同上。                                             

4、先定位，再用transform方法:

html代码不变，原理是：“子绝父相”先定位，然后让儿子下移父亲的50%，然后再上移自身的50%，就可居中。css设置代码为：

#box {
	width: 200px;
	height: 200px;
	background-color: yellow;
	position: relative;
}
#son {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

结果同上。

5、css3的box方法：

html不变，css的代码如下:

#box {
	width: 200px;
	height: 200px;
	background-color: yellow;
	display: -webkit-box;
	-webkit-box-pack: center; /* 表示横向居中 */
	-webkit-box-align: center; /* 表示垂直居中 */
}

结果:

6、flex布局方法：

html代码不变，css代码为：

#box {
	width: 200px;
	height: 200px;
	background-color: yellow;
	display: flex;
	align-items: center;
}

结果为：

二、让内容水平居中的方法：

1.width 结合margin:5px auto方法

css代码：

#box {
	width: 150px;
	height: 150px;
	background-color: yellow;
	}
#son {
	display: block;
	width: 108px;
	margin: 0 auto;
	background-color: pink;
}

结果：

2.inline-block和父元素text-align方法

#box {
	width: 150px;
	height: 150px;
	background-color: yellow;
	text-align: center;
}
#son {
	display: inline-block;
	width: 108px;
	background-color: pink;
}

结果同上。

3.flex方法：display:flex; justify-content:center;

css代码：

#box {
	width: 150px;
	height: 150px;
	background-color: yellow;
	display: flex;
	justify-content: center;
}
#son {
	width: 108px;
	background-color: pink;
}

结果（他会把盒子撑大，所以最好提前设置一下他的高度）：

四、css3的box方法

#box {
	width: 150px;
	height: 150px;
	background-color: yellow;
	display: -webkit-box;
	-webkit-box-pack: center; /* 表示横向居中 */				
}
#son {
	width: 108px;
	background-color: pink;
}

结果和上面一样。

五、用定位方法：

#box {
	width: 150px;
	height: 150px;
	background-color: yellow;
	position: relative;
}
#son {
	width: 108px;
	background-color: pink;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

结果如图：