居中问题浅谈

在CSS的世界里居中一直都是人们抱怨的一件事。“居个中为什么就这么难呢？”人们无奈的说。我认为困难的不是怎么做他，而是怎样在不同的情况下，用不同的方法去达到这相同的目的---居中。

所以 让我们来解决这个问题吧

水平居中(Horizontally)

• 行内块元素（inline or inline-* element）

.center-children {
text-align: center;
}
```

• 一个块级元素（one block level element）

.center-me {
margin: 0 auto;
}
```

• 多个块级元素（some block level elements）

  HTML

  <main class="inline-block-center">
      <div>
      I'm an element that is block-like with my siblings and we're centered in a row.
      </div>
      <div>
      I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
      </div>
      <div>
      I'm an element that is block-like with my siblings and we're centered in a row.
      </div>
  </main>
  

      <main class="flex-center">
        <div>
          I'm an element that is block-like with my siblings and we're centered in a row.
        </div>
        <div>
          I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
        </div>
        <div>
          I'm an element that is block-like with my siblings and we're centered in a row.
        </div>
      </main>
  

  CSS

      body {
        background: #f06d06;
        font-size: 80%;
      }
  
      main {
        background: white;
        margin: 20px 0;
        padding: 10px;
      }
  
      main div {
        background: black;
        color: white;
        padding: 15px;
        max-width: 125px;
        margin: 5px;
      }
  
      .inline-block-center {
        text-align: center;
      }
      .inline-block-center div {
        display: inline-block;
        text-align: left;
      }
  
      .flex-center {
        display: flex;
        justify-content: center;
      }
  

  总之：

  • text-align

垂直居中（Verticallly）

• 行内块元素（inline or inline-* element）

  • 单行情况

    padding

        .link {
            padding-top: 30px;
            padding-bottom: 30px;
        }
    

    line-height

        .center-text-trick {
          height: 100px;
          line-height: 100px;
          white-space: nowrap;
        }
    

  • 多行情况

    HTML

    <table>
      <tr>
        <td>
          I'm vertically centered multiple lines of text in a real table cell.
        </td>
      </tr>
    </table>
    
    <div class="center-table">
      <p>I'm vertically centered multiple lines of text in a CSS-created table layout.</p>
    </div>
    

    CSS

    body {
      background: #f06d06;
      font-size: 80%;
    }
    
    table {
      background: white;
      width: 240px;
      border-collapse: separate;
      margin: 20px;
      height: 250px;
    }
    
    table td {
      background: black;
      color: white;
      padding: 20px;
      border: 10px solid white;
      /* default is vertical-align: middle; */
    }
    
    .center-table {
      display: table;
      height: 250px;
      background: white;
      width: 240px;
      margin: 20px;
    }
    .center-table p {
      display: table-cell;
      margin: 0;
      background: black;
      color: white;
      padding: 20px;
      border: 10px solid white;
      vertical-align: middle;
    }
    

    总之：

    • padding
    • line-height
    • vertical-align
    • flex

• 一个块级元素（one block level element）

  • 知道元素高度

    .parent {
      position: relative;
    }
    .child {
      position: absolute;
      top: 50%;
      height: 100px;
      margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
    }

• 不知道元素高度

    .parent {
        position: relative;
    }
    .child {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

• 无所谓，flex解决一切

    .parent {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

水平与垂直同时居中（Both Horizontally and Vertically）

• 知道元素尺寸

  .parent {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  

• 不知道元素尺寸

  .parent {
      position: relative;
  }
  .child {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }
  

• 无所谓，flex解决一切

  .parent {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  

总结（Conclusion）

只要你愿意，css会帮你完成这一切...

参考资料

• Centering in CSS: A Complete Guide：基本参考和翻译本文章内容，十分感谢