元素水平垂直居中的方法

• 利用定位+margin:auto

  <style>
  .father{
      width:500px;
      height:300px;
      border:1px solid #0a3b98;
      position: relative;
  }
  .son{
      width:100px;
      height:40px;
      background: #f0a238;
      position: absolute;
      top:0;
      left:0;
      right:0;
      bottom:0;
      margin:auto;
  }
  </style>
  <div class="father">
      <div class="son"></div>
  </div>
  

  如果没有给子元素设置宽高，那么子元素的宽高将会和父元素一致。
  使用该种方式其实是子元素的margin占满了父盒子剩余的部分。
• 利用定位+margin:负值

  <style> 
  .father { 
      position: relative; 
      width: 200px; 
      height: 200px; 
      background: skyblue; 
  } 
  .son { 
      position: absolute; 
      top: 50%; 
      left: 50%; 
      margin-left:-50px; 
      margin-top:-50px; 
      width: 100px; 
      height: 100px; 
      background: red; 
  } 
  </style> 
  <div class="father"> 
      <div class="son"></div> 
  </div>
  

• 利用定位+transform

  <style> 
      .father { 
          position: relative; 
          width: 200px; 
          height: 200px; 
          background: skyblue; 
      } 
      .son { 
          position: absolute; 
          top: 50%; 
          left: 50%; 
          transform: translate(-50%,-50%); 
          width: 100px; 
          height: 100px; 
          background: red; 
      } 
  </style> 
  <div class="father"> 
      <div class="son"></div> 
  </div>
  

• table布局 设置父元素为display:table-cell，子元素设置 display: inline-block。利用vertical和text-align可以让所有的行内块级元素水平垂直居中

  <style> 
      .father { 
          display: table-cell; 
          width: 200px; 
          height: 200px; 
          background: skyblue; 
          vertical-align: middle; 
          text-align: center; 
      } 
      .son { 
          display: inline-block; 
          width: 100px; 
          height: 100px; 
          background: red; 
      } 
  </style> 
  <div class="father"> 
      <div class="son"></div> 
  </div>
  

  注意： 是所有的行内块级元素都会居中，不管有几个。
• flex弹性布局

  <style> 
  .father { 
      display: flex; 
      justify-content: center; 
      align-items: center; 
      width: 200px; 
      height: 200px; 
      background: skyblue; 
  } 
  .son { 
      width: 100px; 
      height: 100px; 
      background: red; 
  } 
  </style> 
  <div class="father"> 
      <div class="son"></div> 
  </div>
  

  css3中了flex布局，可以非常简单实现垂直水平居中
  这里可以简单看看flex布局的关键属性作用：
  • display: flex时，表示该容器内部的元素将按照flex进行布局
  • align-items: center表示这些元素将相对于本容器水平居中
  • justify-content: center也是同样的道理垂直居中
• grid网格布局

  <style> 
      .father { 
          display: grid; 
          align-items:center; 
          justify-content: center; 
          width: 200px; 
          height: 200px; 
          background: skyblue; 
      } 
      .son { 
          width: 10px; 
          height: 10px; 
          border: 1px solid red 
      } 
  </style> 
  <div class="father"> 
      <div class="son"></div> 
  </div>
  

  这里看到，gird网格布局和flex弹性布局都简单粗暴

总结

根据元素标签的性质，可以分为：

• 内联元素居中布局
• 块级元素居中布局

内联元素居中布局

水平居中

• 行内元素可设置：text-align: center
• flex布局设置父元素：display: flex; justify-content: center
  垂直居中
• 单行文本父元素确认高度：height === line-height
• 多行文本父元素确认高度：display: table-cell; vertical-align: middle

块级元素

水平居中

• 定宽: margin: 0 auto
• 绝对定位+left:50%+margin:负自身一半
  垂直居中
• position: absolute设置left、top、margin-left、margin-top(定高)
• display: table-cell
• transform: translate(x, y)
• flex(不定高，不定宽)
• grid(不定高，不定宽)，兼容性相对比较差