• 使用<table><tr><td>標簽

HTML代碼

<table class="parent">
<tr><td class="child">
table居中的方法
</td></tr>
</table>

CSS代碼

.parent{
  border: 1px solid red;
  height: 600px;
}
.child{
  border: 1px solid green;
}

父元素的高度確定,子元素無高度且內容依據(jù)父元素垂直居中。

• 使用100% 高度的span. befor和span.afrer 加上display:inline-block

HTML代碼

<div class="parent">
    <span class=before></span>
         <div class="child"></div>
    <span class=after></span>
</div>

CSS代碼

.parent{
  height: 600px;
  text-align: center;                       /*水平居中*/
}

.child{
  display: inline-block;
  width: 300px;                            /*寬度可設置*/
  vertical-align: middle;                /*垂直居中*/
}

.parent .before{
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.parent .after{
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

• 使用div替代table

HTML代碼

<div class="parent">
      <div class="td">
        <div class="child">
          
        </div>
    </div>
  </div>

CSS代碼

div.parent{
  display: table;
  height: 600px;                                        /*父元素高度確定*/
}
div.td{
  display: table-cell;
  vertical-align: middle;                            /*實現(xiàn)垂直居中*/
}
div.child{
}

• margin-top:50%

HTML代碼

<div class="parent">
    <div class="child">
   
    </div>
  </div>

CSS代碼

.parent{
  height: 600px;                    /*父元素高度確定，子元素依據(jù)此高度居中*/
  position: relative;
}
.child {                            /*垂直和水平居中*/
    width: 600px; height: 400px;
    position: absolute;
    left: 50%; top: 50%;
    margin-top: -200px;             /* 高度的一半 */
    margin-left: -300px;            /* 寬度的一半 */
}

這種方法有一個很明顯的不足，就是需要提前知道元素的尺寸。否則margin負值的調整無法精確。此時，往往要借助JS獲得。

• 使用transform:translate(-50%, -50%）

HTML代碼

<div class="parent">
      <div class="td">
        <div class="child">
          
        </div>
    </div>
  </div>

CSS代碼

.parent{
  display: table;
  height: 600px;                          /*父元素高度確定*/
}

.child{
    width: 600px; height: 400px;
    position: absolute; 
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);    /* 水平 垂直  50%為自身尺寸的一半*/
}

使用transform代替margin. transform中translate偏移的百分比值是相對于自身大小的。 問題很明顯，兼容性不好。IE9(-ms-), IE10+以及其他現(xiàn)代瀏覽器才支持。中國盛行的IE8瀏覽器被忽略是有些不適宜的（手機web開發(fā)可忽略）。

• 使用margin:auto

HTML代碼

  <div class="parent">
    <div class="child">
      
    </div>
  </div>

CSS代碼

.parent{
  height: 600px;
  position: relative;
}
.child{
  position: absolute;
  width: 300px;
  height: 200px;
  top: 0; bottom: 0; left: 0; right: 0;
  margin: auto;                          /* 有了這個就自動居中了 */
}       

上面代碼的width: 300px height: 200px僅是示意，修改為其他尺寸，或者不設置尺寸（需要是圖片這種自身包含尺寸的元素），都是居中顯示的。
可以用一個小demo來加深印象

HTML代碼：

<div id="dialog" class="dialog">
    <input type="button" id="button" class="button" value="點擊彈框走起~~" />
</div>

CSS代碼：

.dialog {
 width: 600px; height: 400px;
 margin: auto; 
 border: 1px solid #ddd;
 border-radius: 15px; background-color: #fff;
 box-shadow: 0 3px 18px rgba(0,0,0,.5); }

.dialog_absolute {
 position: absolute; 
 left: 0; top: 0; right: 0; bottom: 0; z-index: 1; }

.button { 
 display: block; 
 margin: 170px auto;
 width: 160px; height: 36px; 
 font-size: 14px; }

JS代碼：

var eleDialog = document.getElementById("dialog"),
    eleButton = document.getElementById("button");

eleButton.onclick = function() {
    if (eleDialog.className === "dialog") {
        eleDialog.className = "dialog dialog_absolute";
        this.value = "點擊彈框降落~~";    
    } else {
        eleDialog.className = "dialog";
        this.value = "點擊彈框走起~~";    
    }
};