前言

面试被问到了css垂直居中的方法，当时只答上来了几种，因此下来之后百度了一下，然后总结如下

1.absolut,relative,margin-left,margin-top

//html
<div class="parent">
    <div class="child">
      这里被我垂直居中了。
    </div>
  </div>

//css
.parent{
      height: 600px;
      border: 1px solid red;
      position: relative;
}
.child{
      border: 1px solid green;
      width: 300px;
      height:100px;
      position: absolute;
      background:red;
      top: 50%;
      left: 50%;
      margin-left: -150px;
      margin-top: -50px;
}

2.absolut,relative,translate

//html
<div class="parent">
    <div class="child">
      这里被我垂直居中了。
    </div>
  </div>

//css
.parent{
      height: 600px;
      border: 1px solid red;
      position: relative;
}
.child{
      border: 1px solid green;
      width: 300px;
      height:100px;
      position: absolute;
      background:red;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%)
}

3.absolute,relative,margin,auto

//html
<div class="parent">
    <div class="child">
      这里被我垂直居中了。
    </div>
  </div>

//css
.parent{
      height: 600px;
      border: 1px solid red;
      position: relative;
}
.child{
      border: 1px solid green;
      width: 300px;
      height:100px;
      position: absolute;
      background:red;
      margin: auto;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
}

4.:afte,:before加上inline-block

//html代码
 <div class="parent">
    <div class="child">
      这里被我垂直居中了。
    </div>
  </div>

//css
.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{
      content:'';
      outline: 3px solid red;
      display: inline-block;
      height: 100%;
      vertical-align: middle;
}
.parent:after{
      content:'';
      outline: 3px solid red;
      display: inline-block;
      height: 100%;
      vertical-align: middle;
}

5.flex

//html
<div class="parent">
    <div class="child">
      这里被我垂直居中了。
    </div>
  </div>
//css
.parent{
      height: 600px;
      border: 3px solid red;
      display: flex;
      justify-content: center;
      align-items: center;
}
.child{
      border: 3px solid green;
      width: 300px;
      height: 100px;
}

6.writing-mode

//html代码
<div class="g-father">
    <div class="parent">
        <div class="child">这里垂直居中了</div>
    </div>
</div>

//css
.g-father {
    writing-mode: vertical-lr;
    text-align: center;
}
.parent{
    writing-mode: horizontal-tb;
    display: inline-block;
    text-align: center;
    width: 100%;
}
.child{
    display: inline-block;
    margin: auto;
    text-align: left;
}