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

各种方式对比总结

Technique Browser Support Responsive Overflow resize:both Variable Height Major Caveats
Absolute Centering Modern & IE8+ Yes Scroll, can overflow container Yes Yes* Variable Height not perfect cross-browser
Negative Margins All No Scroll Resizes but doesn't stay centered No Not responsive, margins must be calculated manually
Transforms Modern & IE9+ Yes Scroll, can overflow container Yes Yes Blurry rendering
Table-Cell Modern & IE8+ Yes Expands container No Yes Extra markup
Inline-Block Modern, IE8+ & IE7* Yes Expands container No Yes Requires container, hacky styles
Flexbox Modern & IE10+ Yes Scroll, can overflow container Yes Yes Requires container, vendor prefixes

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;
    }
    

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