最近在做百度ife上2015春季的html,css练习，印象最深的就是各种情况下的水平垂直居中了，在这里总结一下，以后要用的时候如果忘了就可以直接在自己的博客里找啦。

水平居中

首先，居中肯定是子元素在一个父元素中居中，设置水平居中的前提是父元素必须是块级元素，且宽度已经设定。

子元素为行内元素

当子元素为行内元素时，子元素的宽度是由其内容撑开的，对父元素设定“text-align:center;”，就可实现子元素在父元素中水平居中。

这种情况最简单的方法就是给子元素设定“margin:0 auto;”，相同的原理，也可以通过父元素和子元素的宽度计算出父元素的padding-left/padding-right或者计算出子元素的margin-left/margin-right，然后设置即可。

注意：如果子元素相对父元素绝对定位（此时父元素需要设置定位方式为相对定位，即position:relative;），对子元素样式设置如下：

.child {
	position: absolute;
	left: 50%;
	margin-left: -50px;
	width: 100px;
	height: 100px;
}

margin-left大小设置为子元素长度的一般，符号为负。

这种情况下，子元素宽度没有设定，那么子元素的水平方向上就会充满整个父元素的宽度，那么子元素就是水平居中的，其实这种情况下谈水平居中也没有意义。

当子元素为宽度设定的浮动元素时，设置其“margin:0 auto;”就无法实现水平居中了。可以通过父元素和子元素的宽度计算出父元素的padding-left/padding-right或者计算出子元素的margin-left/margin-right，然后设置，使浮动子元素水平居中。

当浮动的子元素宽度未设定时，就无法通过计算padding和margin来使其水平居中了，这时可以用下面的方法。

1
2
3

<div class="parent">
	<div class="child"></div>
</div>

.parent {
	float:left;
 	position:relative;
 	left:50%;
}
.child {
	float:left;
 	position:relative;
 	right:50%;
}

显然，设置垂直居中的前提是父元素的高度已经设定。

此时，子元素高度由其内容撑开。设置父元素的line-height等于父元素的height即可。

和水平定位一样，根据父元素子元素高度算出父元素的padding-top/padding-bottom或者子元素的margin-top/margin-bottom即可。

同样，也可以利用子元素相对父元素绝对定位实现垂直居中（此时父元素需要设置定位方式为相对定位，即position:relative;）。对子元素样式设置如下：

.child {
	position: absolute;
	top: 50%;
	margin-top: -50px;
	width: 100px;
	height: 100px;
}

margin-left大小设置为子元素高度的一般，符号为负。

这种情况下，给父元素设定“display:table-cell;vertical-align:middle;”即可。

其实，对于水平和垂直居中，如果父元素个、宽度或者高度没有设定，设置父元素的padding-left与padding-right相等，或者padding-top与padding-bottom相等就可以让子元素看起来是居中的，但这样谈论没什么意义。