这里指的水平居中当然是说通过CSS来自动控制的，而不是说计算之后，设置一个位置来指定居中的。
一般情况下有三种实现方式：
在实现方式中，我们定义两个名词来方便后面的解说:out--包含需要被居中元素的那个容器，in--需要居中的元素。
1. text-align: center
2. margin-left : auto; margin-right: auto
3. 负外边距方式
三种方式用起来都比较简单，但是都有自己的适用范围，上面给出的是达到居中目标而需要的条件，其中标明红色的地方即是条件，也是方法的局限所在。
前两种的原理都比较好理解，第三种的原理稍微讲一下，也很好理解：
实际上主要是两步，第一把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>
原文：http://www.cnblogs.com/labixiaodai/p/horizon_align_center.html