CSS垂直水平居中

小小的总结一下：行内元素水平居中用text-align: center;块级元素水平居中用margin-left: auto; margin-right: auto;

首先讨论一下单行时的情况。

毫无疑问，这是最简单的一种情况。

HTML结构如下：

 <div class="demo">
     <span>111111111111111111111111111111111111</span>
 </div>

高度不固定（这种方法同样适用于多行文时的情况，下面就不再讨论）

 .demo {
     text-align: center;
     padding-top: 20px;
     padding-bottom: 20px;
 }

高度固定

 .demo {
     text-align: center;
     height: 100px;
     line-height: 100px;
 }

接下来，讨论下多行时的情况。

HTML结构如下：

 <div class="demo">
     <span>111111111111111111111111111111111111<br />22222222222222222222</span>
 </div>

高度不固定时只需要添加pading值就可以，不多加讨论了。

高度固定时

方法一：父元素设置display: table，子元素设置display:table-cell。利用了表格的特性。

 .demo {
     height: 100px;
     display: table;
     margin-left: auto;
     margin-right: auto;
 }
 .demo span {
     display: table-cell;
     vertical-align: middle;
 }

方法二：父元素设置position: relative，子元素设置position: absolute。主要是利用了translate的中心是相对于元素本身的特点。

 .demo {
   position: relative;
   height: 100px;
 }

 .demo span {
   position: absolute;
   left: 50%;
   top: 50%;
   -webkit-transform: translate(-50%, -50%);
       -ms-transform: translate(-50%, -50%);
           transform: translate(-50%, -50%);
 }

方法三：利用flex布局。

 .demo {
   height: 100px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: center;
   -webkit-justify-content: center;
       -ms-flex-pack: center;
           justify-content: center;
   -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
 }

方法四：利用:after,:before伪类，结合inline-block的特性实现垂直居中。

 .demo {
   height: 100px;
   text-align: center;
 }

 .demo:after, .demo:before {
   display: inline-block;
   vertical-align: middle;
   width:;
   height: 100%;
   visibility: hidden;
   content: '';
 }

 .demo span {
   display: inline-block;
   vertical-align: middle;
 }

暂时就想到这些了。