參考：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;
}