CSS中，如果我们想让元素水平垂直居中，有很多种方法可以达成我们想要的效果。
接下来就来看看有哪些方法。

1.在grid布局中达成的方法

  <div class="wrapper">
  <div class="box">元素</div>
</div>
  <style>
  .wrapper{
    display:grid;
    height:400px;
    align-items:center;  */align-content:center;/*
    justify-items:center;  */justify-content:center;/*
  }
    
  </style>

使用grid布局的话，运用justify-items、justify-content、align-items、align-content可以简单使元素垂直居中

2.在flex布局中达成的方法

  <div class="wrapper">
  <div class="box">元素</div>
</div>
  <style>
  .wrapper{
    display:flex;
    height:400px;
    align-items:center;
    
    justify-content:center;
 
  }
    
  </style>
在flex布局中，使用 align-items:center;justify-content:center;即可实现元素垂直水平居中。
 

3.在flex布局和gird布局中最简单实现元素垂直水平居中的方法

  <div class="wrapper">
  <div class="box">元素</div>
</div>
  <style>
  .wrapper{
    display:grid;  */flex/*
    height:400px;
  }
   .box{
     margin:auto;
   }
  </style>
在grid或者flex布局中，只要给子元素设置margin:auto;即可实现元素水平垂直居中。

4.display：table-cell；方法

<div class="table">
  <div class="wrapper">
  <p>元素<p>
</div>
  </div>
  <style>
    .table{
      display:table;
      width:100%;
    }
  .wrapper{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    border:1px solid;
    height:400px;
    
  }
   .wrapper > p{
     display:inline-block;
     
   }
  </style>
给父元素的父元素设置为table，并且设置宽度。给父元素设置为table-cell，子元素设置为inline-block。即可以使用使行内元素垂直水平居中的方式。

5.绝对定位方法

  <div class="wrapper">
  <div class="box">元素
    </div>
</div>

  <style>
   .wrapper{
     border:1px solid;
     height:200px;
     position:relative;
   }
    

  
   .box{
     position:absolute;
     left:50%;
     top:50%;
     border:1px solid;
     transform:translate(-50%,-50%)
     margin:0;
   }
  </style>
给父元素设置相对定位，给子元素设置绝对定位，即可调整为水平垂直居中。

6.使用::after伪元素的方法

  <div class="wrapper">
  <div class="box">元素
    </div>
</div>

  <style>
   .wrapper{
    text-align:center;
     width:200px;
     height:400px;
     border:1px solid;
   }
    .wrapper::after{
      content:" ";
      line-height:400px;
    }

  
   .box{
     display:inline-block;
   }
必须设置父元素的宽高，并且在父元素后设置伪元素after，加入一个空白文本，并且行高设置为父元素高度。子元素设置为inline-block即可按照行内元素方法设置居中。

7.另一种绝对定位方法

  <div class="wrapper">
  <div class="box">元素
    </div>
</div>

  <style>
   .wrapper{
    position:relative;
     width:200px;
     height:200px;
     border:1px solid;
   }
   
   .box{
     width:100px;
     height:40px;
     position:absolute;
     top:0;
     bottom:0;
     right:0;
     left:0;
     margin:auto;
     border:1px solid;
     text-align:center;
   }
  </style>
和第五种方法一样，但是一定要给子元素设置宽高，然后适用上述方式达成居中。