CSS垂直/水平居中总结

经常会遇到各种元素要求居中的，今天把他们都叫出来统一解决：

1.水平居中

1.1行内元素

text-align:center;

1.2固定宽度块级元素

margin-left:auto;margin-right:auto;

注意：一定要确保设定了宽度值，而且声明了DOCTYPE。

1.3不确定宽度块级元素

<pre name="code" class="html"><div class="wrap">
	<ul>
		<li>不固定宽度</li>
		<li>不固定宽度</li>
		<li>不固定宽度</li>
	</ul>
	<ul>
	<span style="white-space:pre">	</span><li>不固定宽度</li>
		<li>不固定宽度</li>
	</ul>
</div>

由于ul中的li数量未知，所以宽度不确定，现要使ul水平居中。
这里推荐一种最常用的方法：inline-block。

<pre name="code" class="css">.wrap{background:#ff0;text-align:center;padding:20px;}
li{
	list-style:none;
	background:#f0f;
	display:inline-block;
	*display:inline;
	*zoom:1;
}

2.竖直居中

2.1父元素高度不确定的行内元素

给父元素设置相同的上下内边距。

2.2父元素高度确定的单行文本

给父元素设置line-height，值与父元素高度相同，如果使用相对字体，外加overflow:hidden，你懂的。

2.3父元素高度确定的多行文本、图片以及块级元素

方法有很多种，但是个人偏好用绝对定位。

<div class="wrap">
	<div class="m">
		垂直居中
	</div>
</div>

.wrap{
	background:#ff0;
	height:200px;
	position:relative;
}

.m{
	position:absolute;
	background:#f0f;
	top:50%;
	height:80px;
	margin-top:-40px;
}

这个方法需要知道父元素和子元素的高度。还有一种简单方法：

.m{
	background:#f0f;
	margin:auto;
	position: absolute;  
        top: 0; left: 0; bottom: 0; right: 0;  
	height:100px;
	width:100px;
}

3.总结

网上查了资料，方法真的很多，但是比较好的就这几种，选一种最适合的就行了。