CSS实现垂直居中

1.用line-height实现

当需要居中的元素是有内容的行内元素或者文字时，只需要设置父容器line-height即可实现垂直居中。
html

<div class="content">
    <span>Diana</span>
</div>

CSS

.content{
      width: 100px;
      line-height: 500px;
      border: 2px solid black;
    }
    span{
      background-color: violet;
    }

设置行高一般用于让文字居中。

2.使用margin或者padding挤压

这个方法只有知道父容器和子元素的高度的情况下才能使用。
html

<div class="content">
    <div class="div1"></div>
  </div>

CSS（使用margin挤压）

.content{
      width: 100px;
      height: 200px;
      border: 2px solid black;
    }
    .div1{
      width: 100px;
      height: 100px;
      background-color: violet;
      margin-top: 50px; 
    }

或者在父容器中使用padding挤压

.content{
      width: 100px;
      height: 150px;
      border: 2px solid black;
      padding-top: 50px;
    }
    .div1{
      width: 100px;
      height: 100px;
      background-color: violet;
    }

当然可以使用margin与padding结合挤压子元素，同样可以实现垂直居中。

3.使用absolute+margin实现

先将子元素设置position: absolute，再通过调整子元素的边距和margin来实现垂直居中。

position: absolute;
height: 高度值;
top: 50%;
margin-top: -(高度值/2);

案例：

.content{
      width: 100px;
      height: 200px;
      border: 2px solid black;
      position: relative;
    }
    .div1{
      width: 100px;
      height: 100px;
      background-color: violet;
      position: absolute;
      top: 50%;
      margin-top: -50px;
    }

4.使用flex布局实现

设置父容器flex布局并设置align-items: center，不需要对子元素进行设置即可实现垂直居中

.content{
      width: 100px;
      height: 200px;
      border: 2px solid black;
      display: flex;
      align-items: center;
    }
    .div1{
      width: 100px;
      height: 100px;
      background-color: lawngreen;
    }