CSS水平垂直居中方法总结

部分HTML代码如下：

<div class="wrap block">
     <div class="block-center">块儿居中</div>
</div>         

<div class="wrap inline">
    <span class="inline-center">内联居中</span>
</div> 

一、absolute

• 拔河效应（元素宽高需设定）

  .block{
      position: relative;
  }  
  
  .block-center{
      position: absolute;
      margin: auto; /*这句要写，否则无效果*/
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
  } 

• 利用margin（元素宽高需设定）

  .block{
      position: relative;
  }
  
  .block-center{
      position: absolute;
      top: 50%;
      margin-top: -10px; /*元素高度一半*/
      left: 50%;
      margin-left: -50px; /*元素宽度一半*/
  } 

• 利用CSS3 translate

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

二、table

• table-cell

1. inline 元素

   <div class="table-cell">
       <span>我是文字</span>
   </div>

   .table-cell{ /*注意：table-cell不感知margin, 在父元素上设置table-row等属性，也会使其不感知height*/
       display: table-cell;
       vertical-align: middle;
       text-align: center;
   }

2. block 元素

   <div class="table-cell">
       <div class="block">我是块元素</div>
   </div>

   .table-cell{
       display: table-cell;
       vertical-align: middle;
       text-align: center;
   }
   .table-cell .block{
       display: block;
       height: 20px;
       width: 20px;
       margin-left: calc(50% - 10px); /*calc()函数内部的 - 和 + 运算符两侧各加一个空白符，否则会产生解析错误*/
   }

三、块元素自带方法

• 利用 line-height（子元素是linline / inline-block）

  .inline{
      text-align: center;
      height: 80px;
      line-height: 80px; /*行高等于元素高度，line-height不可设置为100%，其百分比值是相对于父元素字体大小计算的*/
  }

• 利用 CSS calc() 函数（子元素是 block）

  .block{
      width: 200px;
      height: 200px;
  }
  
  .block-center{
      width: 50px;
      height: 50px;
      margin: calc(50% - 25px); /*由于margin的百分比值是相对于父元素的宽高进行计算的，故此方法只适用于宽高相等的父容器*/
  }

四、flex

1. 块元素和浮动元素

   .block{
       display: flex;
       min-height: 50vh;
   }
   .block-center{
       margin: auto;
   }  

2. 行内元素（给外层父元素添加即可）

   .inline{
       display: flex;
       min-height: 50vh;
       align-items: center;
       justify-content: center;
   }

五、grid

<div class="wrap grid">
    <div class="block">grid</div>
</div>

.grid{
    display: grid;
    width: 200px;
    height: 150px;
}

.grid .block{
    width: 50px;
    height: 50px;
    align-self: center;
    justify-self: center;
}

对于 grid 的介绍和学习，推荐一篇blog：grid栅格布局

相关推荐：

• 水平垂直居中，这是一道面试必考题
• 盘点8种CSS实现的垂直水平居中

本篇博客基于几种常用的垂直居中方法进行了总结，不全的地方欢迎大家评论补充。

原文地址：https://www.cnblogs.com/Kuro-P/p/8479476.html