css 垂直居中

参考：http://www.cnblogs.com/dojo-lzz/p/4419596.html

凡是table布局可以实现的，css一定可以实现。css可以实现的，table未必能做到

一：单行元素垂直居中

只考虑单行是简单的，无论是否给容器固定高度，只要给容器设置line-height和height，并且两指相等，再加上over-flow:hidden.

<div class="wrap2">
单行文本垂直居中，line-height
</div>

.wrap2{
line-height: 200px;
width: 100px;
background-color: #999;

overflow: hidden;

}

优点：

1.同时支持块级元素和内联元素

2.支持所有浏览器

缺点：

1.只能显示一行

2.IE中不支持<img>等的居中

注意：

1.使用相对高度定义height和line-height不想毁了布局，一定要加overflow:hidden

二：多行内容居中，且容器高度可变

给出一致的padding-bottom和padding-top

<div class="wrap3">
哈哈哈啊哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈
</div>

.wrap3{
background-color: #565337;
width: 100px;
padding-top: 50px;
padding-bottom: 50px;
}

优点：

1.同时支持块级元素和内联元素

2.支持非文本内容

3.支持所有浏览器

缺点：

容器不能固定高度

三：把容器当做表格单元

css中display属性值，包括display:table,table-cell;table-row等，能把元素当做表格单元来显示。再加上vertical-align:middle,就和表格中的valign="center"一样了。

<!--把容器当做表格单元-->
<div class="wrap4">
哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈啊哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈
</div>

.wrap4{
display: table-cell;
height: 300px;
vertical-align: middle;
background-color: #876343;
}

四：高度固定，margin-top或者top50%

在高度固定的情况下，可以设置元素position:absolute。top:50%,margin-top:-1/2height;

五： 弹性盒式布局

　　利用弹性盒式布局，将字元素的主轴、侧轴的排列方式都设置为居中对齐

　　原理：使用CSS弹性盒

 <div class="container is-Flexbox">
            <div class="center">
                既要脚踏实地于现实生活，又要不时跳出现实到理想的高台上张望一眼。<br>
                在精神世界里建立起一套丰满的体系，引领我们不迷失不懈怠。<br>
                待我们一觉醒来，跌落在现实中的时候，可以毫无怨言地勇敢地承担起生活重担。<br>
                这是孙少平教给我的道理。 <br>
                只能永远把艰辛的劳动看做生命的必要，即使没有收获的指望，也心平气静地继续耕种。<br>
                要做到这一点，路还好长。
            </div>
        </div>

.is-Flexbox {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}