几种可以让元素水平垂直居中的方法

转载自 http://www.cnblogs.com/dan-dan/p/4771614.html

一、负margin法

• 这是比较常用的方法，在知道元素的宽高的前提下才能使用

  <div id="a"></div>
  
    #a{
        height:300px;
        width:300px;
        position:absolute;
        top:50%;
        left:50%;
        margin-left:-150px;
        margin-top:-150px;
   }
  

• 负margin是个非常有意思的用法，深入了解后会发现他在布局上相当有用

• 优点：代码量少，兼容性好。

• 缺点：非响应式方法，内容可能会超出容器。

二、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，可能需要带供应商前缀

三、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的用法远不止如此，在布局上还有很多有趣的用法。

四、“完全水平垂直居中”：

• 必须要设置元素的高度，图片自身有高度的可以不设。

  <div id="a"></div>
  
    #a{  
        width: 200px;
        height: 200px;
        background: red;
        margin:auto;
        position: absolute;
        top:0;left:0;right: 0;bottom: 0;
  }