CSS居中总结

原文

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

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