CSS 居中的各種方案

• 實現居中的樣式分為容器 (container) 的樣式和需要居中的元素 (item) 的樣式最住。
• 容器默認指一個塊級元素望众。
• 各種方案都有其優(yōu)缺點揩尸，根據實際需求選擇绣溜。如果不考慮兼容性的話牍戚，優(yōu)先選擇用 flex 實現幕帆。

水平居中

• 行內或行內塊元素

  .container {
    text-align: center;
  }
  

• 單個塊級元素

  .item {
    margin: 0 auto;
  }
  

• 多個塊級元素
  • inline-block 方案

    .container {
      text-align: center;
    }
    
    .item {
      display: inline-block;
    }
    

  • flex 方案

    .container {
      display: flex;
      justify-content: center;
    }
    

垂直居中

• 行內或行內塊元素
  • 單行
    • 容器高度由元素撐開

      .container {
        padding: 50px 0;
      }
      

    • 容器高度固定并且已知

      .container {
        height: 100px;
        line-height: 100px;
      }
      

  • 多行（要將多行內容包成一個元素）
    • table 方案

      .container {
        display: table;
      }
      
      .item {
        display: table-cell;
        vertical-align: middle;
      }
      

    • flex 方案（多行內容為文本時获搏，可以不包成一個元素）

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

    • 偽元素方案
      • 元素的寬度必須小于容器的寬度，否則會被擠到容器下面失乾。
      • 這是因為即使的空的偽元素常熙，它跟它后面的行內元素或文本之間也會有空隙。
      • 這個空隙的大小跟字體大小有關碱茁，當字體大小等于 0 時空隙消失裸卫。
      • 所以這就導致后面元素在容器中可以占用的寬度變小了，于是當元素寬度等于容器寬度時纽竣，它就會被擠下去墓贿。
      • 解決的方法就是將容器的 font-size 設置為 0茧泪，然后在元素中再將 font-size 設置為所需的值。

      .container {
        font-size: 0;
      }
      
      .container::before {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
      }
      
      .item {
        display: inline-block;
        vertical-align: middle;
        font-size: 16px;
      }
      

• 單個塊級元素
  • 絕對定位方案
    • 元素高度已知

      .container {
        position: relative;
      }
      
      .item {
        position: absolute;
        top: 50%;
        height: 100px;
        margin-top: -50px;
      }
      

    • 元素高度未知

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

  • flex 方案

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

同時水平和垂直居中

• 絕對定位方案

  .container {
    position: relative;
  }
  
  .item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
  }
  

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

  .container {
    position: relative;
  }
  
  .item {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100px;
    height: 100px;
    margin: auto;
  }
  

• flex 方案

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

  .container {
    display: flex;
  }
  
  .item {
    margin: auto;
  }
  

• grid 方案

  .container {
    display: grid;
  }
  
  .item {
    margin: auto;
  }