簡介4種CSS實現水平垂直居中的方法及優缺點

絕對定位居中 Absolute Centering

<div class="Container">  
  <div class="Absolute-Center">  
  </div>
</div>
  
.Container {
  position: relative;
}
.Absolute-Center {
  position: absolute;  
  width: 50%;
  height: 50%;
  overflow: auto; //防止內容越界溢出
  margin: auto;
  top: 0; left: 0; bottom: 0; right: 0;
}

優勢：

1. 兼容性好 Support IE8+

2. 支持百分比寬高

缺點：

1. 必須聲明高度

2. 不適用Windows Phone

負邊距 Negative Margins

.is-Negative {
        position: absolute;
        width: 100px;
        height: 200px;
        padding: 10px;
        top: 50%; left: 50%;
        margin-left: -60px; //(width + padding)/2
        margin-top: -110px; //(height + padding)/2
}

優勢：

1. 兼容性好 Support All Browser

缺點：

1. 定寬高且不支持百分比

表格單元 Table Cell

<div class="Container ">  
  <div class="Table-Cell">  
    <div class="Child">  
    </div>
  </div>
</div>

.Container {
  display: table;
}
.Table-Cell {
  display: table-cell;
  vertical-align: middle;
}
.Child {
  width: 50%;
  margin: 0 auto;
}

優勢：

1. 兼容性好 Support IE8+

2. 不定寬高

缺點：

1. html層級多

移動 Transform:Translate

.Transform-Translate {
  position: absolute;
  width: 50%;
  margin: auto;
  top: 50%; left: 50%;
  -webkit-transform: translate(-50%,-50%);
}

優勢：

1. 不定寬高

缺點：

1. 瀏覽器兼容性（適合移動端）

2. 廠商前綴

3. 可能與其餘transform屬性衝突