• 各种方式对比总结
• absolute centering
• Negative margins
• Transform
• Table-Cell
• Inline-Block
• Flex

原文 详细讲解了各种水平和垂直居中的方法，并给出了浏览器兼容性和优缺点。

各种方式对比总结

absolute centering

• html

  <div class="container">
    <div class="content">
      // Content
    </div>
  </div>
  

• css

  .container {
      position: relative;
  }
  .content {
      position: absolute;
      margin: auto;
      top: 0; left: 0; bottom: 0; right: 0;
  }
  

注意: 当没有指定内容块的具体的高度和宽度时，内容块会填满剩余空间。可以通过使用max-height来限制高度，也可以通过 display:table 来使高度由内容来决定，但是浏览器支持不是很好。

• Not compatible with the Resizing technique.
• Firefox/IE8: Using display: table aligns the content block to the top, but is still centered horizontally.
• IE9/10: Using display: table aligns the content block to the top left.
• Mobile Safari: The content block is centered vertically, but becomes slightly off-center horizontally when using percentage based widths.

Negative margins

• html

  <div class="isNegative">
    //Content
  </div>
  

• css

  .isNegative {
      position: relative;
      width: 200px;
      height: 300px;
      left: 50%;
      top: 50%;
      margin-left: -100px;
      margin-top: -150px;
  }
  

缺点:需要知道具体的高度和宽度

Transform

  .content {
      position: relative;
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
  }

这里translate的百分比是相对于自身的，所以高度是可变的

Table-Cell

• html

  <div class="Center-Container is-Table">
    <div class="Table-Cell">
      <div class="Center-Block">
      <!-- CONTENT -->
      </div>
    </div>
  </div>
  

• css

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

注意: 需要添加最内层的div，并且给div指定宽度和margin:0 auto;来使div居中。

Inline-Block

• html

  <div class="Center-Container is-Inline">
    <div class="Center-Block">
      <!-- CONTENT -->
    </div>
  </div>
  

• css

  .Center-Container.is-Inline {
    text-align: center;
    overflow: auto;
  }
  
  .Center-Container.is-Inline:after,
  .is-Inline .Center-Block {
    display: inline-block;
    vertical-align: middle;
  }
  
  .Center-Container.is-Inline:after {
    content: '';
    height: 100%;
    margin-left: -0.25em; /* To offset spacing. May vary by font */
  }
  
  .is-Inline .Center-Block {
    max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
    /* max-width: calc(100% - 0.25em) /* Only for IE9+ */
  }
  

• 空内容也会占据一定空间，需要margin-left:-0.25em;来抵消偏移
• 内容块的最大宽度不能是100%，否则会把::after的内容挤到下一行

Flex

• html

   <div class="contain">
     <div class="content">
        // content
     </div>
   </div>
  

• css

  .container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  

  最方便最简单的方式，但是要注意浏览器的支持