经常会遇到各种元素要求居中的，今天把他们都叫出来统一解决：
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.总结
网上查了资料，方法真的很多，但是比较好的就这几种，选一种最适合的就行了。
