CSS 居中的各种方案

CSS 居中的各种方案

• 实现居中的样式分为容器 (container) 的样式和需要居中的元素 (item) 的样式。
• 容器默认指一个块级元素。
• 各种方案都有其优缺点，根据实际需求选择。如果不考虑兼容性的话，优先选择用 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;
  }