幾種可以讓元素水平垂直居中的方法

1.負margin法:這是比較常用的方法，在知道元素的寬高的前提下才能使用

<div id="a"></div>

#a{
   height:300px;
  width:300px;
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-150px;
  margin-top:-150px;
}

   注：負margin是個非常有意思的用法，深入了解后會發現他在布局上相當有用。
  優點：代碼量少，兼容性好。
  缺點：非響應式方法，內容可能會超出容器。

2.transform法：

<div id="a"></div>

#a{ 
    width: 50%;
    height: 20%;
    background: green;
    position: absolute;
    top:50%;
    left: 50%;
    transform:translate(-50%, -50%);
        -webkit-transform:translate(-50%, -50%);
        -ms-transform:translate(-50%, -50%);
}

  優點：代碼量少；寬高可變，相應式布局
  缺點：不支持IE8，可能需要帶供應商前綴

3.Flexbox法

<div class="vertical-container">
    <div class="a"></div>
</div>

.vertical-container {
  height: 300px;
  width: 300px;
  background: #ccc;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
              align-items: center;
  -webkit-justify-content: center;
              justify-content: center;
}
.a{
   width: 200px;
   height: 200px;
   background: green;
}

注：Flexbox的用法遠不止如此，在布局上還有很多有趣的用法。

4.“完全水平垂直居中”：必須要設置元素的高度，圖片自身有高度的可以不設。

<div id="a"></div>

#a{  
    width: 200px;
    height: 200px;
    background: red;
    margin:auto;
    position: absolute;
    top:0;left:0;right: 0;bottom: 0;
}

優點：代碼量少，兼容性好

 更多博客，前關注我的個人小站：http://eidolons-ailidan.rhcloud.com/