CSS水平垂直居中方法总结

Posted 2020-10-25 kuro-p

部分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实现的垂直水平居中

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