小小的总结一下：水平元素水平居中用text-align: center;块级元素水平居中用margin-left: auto; margin-right: auto;
首先讨论一下单行时的情况。
毫无疑问，这是最简单的一种情况。
HTML结构如下：
1 <div class="demo"> 2 <span>111111111111111111111111111111111111</span> 3 </div>
高度不固定（这种方法同样适用于多行文时的情况，下面就不再讨论）
1 .demo { 2 text-align: center; 3 padding-top: 20px; 4 padding-bottom: 20px; 5 }
高度固定
1 .demo { 2 text-align: center; 3 height: 100px; 4 line-height: 100px; 5 }
接下来，讨论下多行时的情况。
HTML结构如下：
1 <div class="demo"> 2 <span>111111111111111111111111111111111111<br />22222222222222222222</span> 3 </div>
高度不固定时只需要添加pading值就可以，不多加讨论了。
高度固定时
方法一：
原文：http://www.cnblogs.com/feishuang008/p/5420604.html