如何实现垂直居中

我们在进行网页布局的时候总会遇到需要把一个元素居中的问题，水平居中很容易就可以实现，但是垂直居中的话相对来说就会有一点复杂，下面列举了一些垂直居中的方案。
一、没有给出高度的情况
1、如果父元素的 height 不写，你只需要把父元素的 padding: 10px 0; 就能将子元素垂直居中

 .parent {
        border: 1px solid red;
        padding: 10px 0
    }
    .child {
        border: 1px solid blue;
    }

 <div class="parent">
        <div class="child">垂直居中了</div>
    </div>

得到的结果：

二、给出明确高度的情况
1、table标签自带的功能

<table class="parent">
    <tr>
      <td class="child">
   垂直居中
      </td>
    </tr>
  </table>

.parent{
  border: 1px solid red;
  height: 600px;
}
.child{
  border: 1px solid green;
}

得到的结果：

2、100%高度的after、before加上inline-block

 <div class="parent">
        <div class="child">
            垂直居中了
        </div>
    </div>

   .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: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }

    .parent:after {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }

得到的结果：

3、根据table自带的垂直居中样式可以把一个div装成table

  <div class="table">
        <div class="td">
            <div class="child">
                垂直居中
            </div>
        </div>
    </div>

  div.table {
        display: table;
        border: 3px solid red;
        height: 300px;
        width: 300px;
    }
    div.td {
        display: table-cell;
        border: 6px solid blue;
        vertical-align: middle;
    }
    .child {
        border: 10px solid black;
        text-align: center;
    }

得到的结果：

4、通过设置flex

<div class="parent">
        <div class="child">垂直居中</div>
    </div>

 .parent {
        height: 300px;
        width: 300px;
        border: 3px solid red;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .child {
        border: 3px solid green;
        width: 300px;
        text-align: center;
    }

得到的结果：

三、通过父元素设置相对定位子元素设置绝对定位
1、top：50%、left：50%、margin-top、margin-left

<div class="parent">
    <div class="child"></div>
  </div>

.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;
}

得到的结果：

2、transform: translate(-50%,-50%)

<div class="parent">
    <div class="child">
     垂直居中了
    </div>
  </div>

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

得到结果：

3、 margin: auto以及上下左右全部为0

<div class="parent">
    <div class="child"></div>
  </div>

.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;
}

得到的结果：