css实现垂直水平居中的几种方法

父元素不定宽，利用line-height实现

<style>
  .box{
    height: 400px;
    background: red;
  }
  .content{
    line-height: 400px; //设置和父元素的高度一样
    text-align: center;
  }
</style>
<div class="box">
  <div class="content">
    这是子元素子元素子元素这是子元素子元素子元素这是子元素子元素子元素这是子元素子元素子元素
  </div>
</div>

使用flex布局

<style>
  .box{
    height: 400px;
    display: flex;
    justify-content: center; /*主轴居中*/
    align-items: center;    /*交叉轴居中*/
 }
</style>
<div class="box">
    <div class="content">
      这是子元素子元素子元素这是子元素子元素子元素这是子元素子元素子元素这是子元素子元素子元素
    </div>
</div>

利用定位和旋转实现

<style>
   .box{
     height: 400px;
     position: relative;
     background: red;
   }
   .content{
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%,-50%);
   }
</style>
 <div class="box">
    <div class="content">
      这是子元素子元素子元素这是子元素子元素子元素这是子元素子元素子元素这是子元素子元素子元素
    </div>
  </div>

设置父元素为相对定位，给子元素设置绝对定位

子元素必须有指定的高度，然后设置 ，top: 0; right: 0; bottom: 0; left: 0; margin: auto;

<style>
   .box{
     height: 400px;
     position: relative;
     background: red;
     width: 300px;
   }
   .content{
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     margin: auto;
     height: 200px; 
   }
 </style>
 <div class="box">
    <div class="content">
      这是子元素子元素子元素这是子元素子元素子元素这是子元素子元素子元素这是子元素子元素子元素
    </div>
  </div>

利用定位和margin实现，子元素必须要定宽和定高。

<style>
   .box{
     height: 400px;
     position: relative;
     background: red;
     width: 300px;
   }
   .content{
     position: absolute;
     height: 200px;
     width: 200px;
     top: 50%;
     left: 50%;
     margin-top: -100px;  /*是高度的一半*/
     margin-left: -100px; /*是宽度的一半*/
   }
 </style>
 <div class="box">
    <div class="content">
      这是子元素子元素子元素这是子元素子元素子元素这是子元素子元素子元素这是子元素子元素子元素
    </div>
 </div>

css3 grid网格

<style>
  .box{
    height: 400px;
    background: red;
    width: 300px;
    display: grid;
  }
  .content{
    height: 200px;
    width: 200px;
    justify-self: center;
    align-self: center;
  }
</style>
<div class="box">
    <div class="content">
      这是子元素子元素子元素这是子元素子元素子元素这是子元素子元素子元素这是子元素子元素子元素
    </div>
</div>

最后说明：这只是本人自己的一些见解，有不足的地方，欢迎大家前来指正。