1.水平居中
（1）行内元素：给父元素设置 text-align:center 。
（2）定宽度块状元素：设置“左右margin”值为“auto”，margin：0 auto可以解决；现代浏览器，IE下text-align:center。。
（3）不定宽度块状元素：
① 设置 display: inline ，使用 text-align:center 来实现居中效果。
② 通过给父元素设置 float, position:relative 和 left:50%，子元素设置 position:relative,
left: -50% 来实现水平居中。
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
css代码：
.container{
position:relative;
left:50%;这两步设置了父元素的相对定位，偏移距离为宽度的一般，设置后，父元素的宽度不变，超出屏幕一半的宽度，高度自适应
float:left; 这一步将父元素的宽度变为宽度自适应，宽度由内容决定
}
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;这两步，将ul的位置偏移ul宽度的一半
}
2.垂直居中
（1）父元素高度确定的单行文本：通过设置父元素的 height 和 line-height 高度一致来实现的。
（2）多行利用inline-block设置
<div style="150px; height:100px; ">
<span>This is a test.<br/>
This is a test. </span>
</div>
我们可以利用inline-block这样做
div{
line-height:100px;
}
span{
display:inline-block;
font-size:10px;
line-height:1.4em;
vertical-align:middle;
}