这里指的水平居中当然是说通过CSS来自动控制的，而不是说计算之后，设置一个位置来指定居中的。
一般情况下有三种实现方式：
在实现方式中，我们定义两个名词来方便后面的解说:out--包含需要被居中元素的那个容器，in--需要居中的元素。
1. text-align: center
- 设置out的text-align: center
- 保证in的display为inline
2. margin-left : auto; margin-right: auto
- 设置in的margin-left : auto; margin-right: auto
- 保证in的display为block
3. 负外边距方式
- 设置in的position:absolute
- 设置in的left:50%
- 设置in的margin-left: 负的in的宽度的一半（例如in的宽度是100px,那么设置这里为-50px）
- 设置out的position:absolute/relative
- 需要明确知道in的宽度
三种方式用起来都比较简单，但是都有自己的适用范围，上面给出的是达到居中目标而需要的条件，其中标明红色的地方即是条件，也是方法的局限所在。
前两种的原理都比较好理解，第三种的原理稍微讲一下，也很好理解：
实际上主要是两步，第一把in通过left：50%移动到out的中间，如果in只是一条线，那么到这里其实工作已经完成了。但是如果in有宽度的话，那么就会发现它的做边框正好位于out的中间位置。ok，
很显然的，第二步我们要把in再往左移动in宽度的一半，即可让in的中间位于out的中间，即in居于out的中间。
下面以in和out都是div来举例，给出代码，代码中包含全部三种方式也可以直接点击下面的demo地址 http://demo.zhengjiachao.com/css/hori-center.html
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="../resource/js/jquery-1.7.2.js"></script>
<style type="text/css">
.out{
height:200px;
background-color: orange;
margin : 10px;
}.in{
width:100px;
height:100px;
background-color: gray;
}
.out.type-1{
text-align: center;
}
.in.type-1{
display: inline;
}
.in.type-2{
margin : 0 auto;
}
.out.type-3{
position: relative;
}
.in.type-3{
position: absolute;
left: 50%;
margin-left: -50px;
}</style>
</head><body>
<div class="out type-1">
<div class="in type-1">
1 text-align: center
</div>
</div>
<div class="out type-2">
<div class="in type-2">
2 margin: 0 auto;
</div>
</div>
<div class="out type-3">
<div class="in type-3">
3 负外边距
</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>