一、高度不写死

高度不写死的情况下，上下padding相同就能垂直居中。

二、高度写死

table自带功能

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
        .parent{
          border: 1px solid red;
          height: 600px;
        }

        .child{
          border: 1px solid green;
        }
  </style>
</head>
<body>
  <table class="parent">
    <tr>
      <td class="child">
      一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
      </td>
    </tr>
  </table>
</body>
</html>

100%高度的afrer、before结合inline block

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
        .parent{
          border: 3px solid red;
          height: 600px;
          text-align: center;
        }

        .child{
          border: 3px solid black;
          display: inline-block;
          width: 300px;
          vertical-align: middle; // 利用vertical-align使.children居中
        }

        .parent .before{
          outline: 3px solid red;
          display: inline-block;
          height: 100%;
          vertical-align: middle; // 利用vertical-align使.children居中
        }
        .parent .after{
          outline: 3px solid red;
          display: inline-block;
          height: 100%;
          vertical-align: middle; // 利用vertical-align使.children居中
        }
  </style>
</head>
<body>
  <div class="parent">
    <span class=before></span>
    <div class="child">
      一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
    </div>
    <span class=after></span>
  </div>
</body>
</html>

这个方法还有一个优化版本，把.berfore、.after改成伪类。

将div装成table

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    div.table{
      display: table; // 将div装成table
      border: 1px solid red;
      height: 600px;
    }

    div.tr{
      display: table-row; // 将div装成table的tr
      border: 1px solid green;
    }

    div.td{
      display: table-cell;
      border: 1px solid blue;
      vertical-align: middle;
    }
    .child{
      border: 10px solid black;
    }
  </style>
</head>
<body>
  <div class="table">
      <div class="td">
        <div class="child">
          一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
        </div>
    </div>
  </div>
</body>
</html>

margin-top -50%

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    .parent{
      height: 600px;
      border: 1px solid red;
      position: relative;
    }
    .child{
      border: 1px solid green;
      width: 300px;
      position: absolute;
      top: 50%; // 距离顶部50%
      left: 50%;
      margin-left: -150px; 
      height: 100px;
      margin-top: -50px; // 将元素上移高度的一半
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">
      一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
    </div>
  </div>
</body>
</html>

translate -50%

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    .parent{
      height: 600px;
      border: 1px solid red;
      position: relative;
    }
    .child{
      border: 1px solid green;
      position: absolute;
      top: 50%; // 距离顶部50%
      left: 50%;
      transform: translate(-50%,-50%); // 将元素上移高度的一半
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">
      一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
    </div>
  </div>
</body>
</html>

position结合margin

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    .parent{
      height: 600px;
      border: 1px solid red;
      position: relative;
    }
    .child{
      border: 1px solid green;
      position: absolute;
      width: 300px;
      height: 200px;
      margin: auto;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">
      一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
    </div>
  </div>
</body>
</html>

flex布局

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    .parent{
      height: 600px;
      border: 3px solid red;
      display: flex; // 设置布局方式为flex
      justify-content: center; 
      align-items: center;
    }
    .child{
      border: 3px solid green;
      width: 300px;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">
      一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
    </div>
  </div>
</body>
</html>

建议：能不写死height就不写死heght

七种方式实现垂直居中

一、 高度不写死

二、 高度写死

一、高度不写死

二、高度写死