前言

这个知识经常作为面试时css部分的题目出现在求职者面前，如果平时不总结，仅凭实际开发中常用的一两种作为回答，这道题就有很大的可能性会挂掉
并且作为合格的前端，对于这种css的布局技巧应该是有备无患，因为你不知道哪天的哪一个地方可能就会用到某一个稀奇古怪的方法来实现一个功能，所以此类知识多多益善。

关于垂直居中

其实最简单的垂直居中的方法是：如果父元素的高度没有被写死，那么只需要给父元素padding:10px 0;就能让子元素垂直居中，但是如果父元素的高度被写死了，那么就很难让子元素居中，但是实际开发中什么情况都会遇到，只能说能不写死高度就别写死高度，这样更好布局。

七种方式实现垂直居中

table自带的功能

这个方法是通过table自带的特性对于td元素进行垂直居中

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <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%高度的 after before 加上 inline block把中间子元素顶居中

此方法是在需要垂直居中元素的前后各加一个span标签，把span标签改为inline block元素，然后让其高度为100%即可实现垂直居中

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

   .child{
      border: 3px solid black;
      display: inline-block;
      width: 300px;
      vertical-align: middle;
    }

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

效果如下

把div伪装成table，利用其特性完成垂直居中

<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    div.table{
      display: table;
      border: 1px solid red;
      height: 600px;
    }

    div.tr{
      display: table-row;
      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>

效果如下

4.margin-top -50%

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .parent{
      height: 600px;
      border: 1px solid red;
      position: relative;
    }
    .child{
      border: 1px solid green;
      width: 300px;
      position: absolute;
      top: 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">
  <title>JS Bin</title>
  <style>
    .parent{
      height: 600px;
      border: 1px solid red;
      position: relative;
    }
    .child{
      border: 1px solid green;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">
      一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
    </div>
  </div>
</body>
</html>

效果如下

定位 margin auto

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <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>

效果如下

7.flex

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .parent{
      height: 600px;
      border: 3px solid red;
      display: 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>

效果如下

总结

以上七种方法并不是所有方法，只是基本能涵盖日常开发所有的垂直居中的实现方法，未来如果有更好的方法会进行补充

前端实现垂直居中的几种方法

前言

关于垂直居中

七种方式实现垂直居中

总结