几种实现垂直居中的方法

[innerWang]

1： 使用flex

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

.parent{
  border: 1px solid red;
  height: 300px;

  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  border: 1px solid green;
  width: 50px;
  height: 50px;
}

[innerWang]

2. 使用 绝对定位 和 transform

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

.parent{
  border: 1px solid red;
  height: 300px;

  position:relative;
}

.child {
  border: 1px solid green;
  height: 50px;
  width:50px;

  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
}

[innerWang]

3. 使用 绝对定位 和 margin:auto

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

.parent{
  border: 1px solid red;
  height: 300px;

  position:relative;
}

.child {
  border: 1px solid green;
  height: 50px;
  width:50px;

  position: absolute;
  top: 0;     // 只需要`top = bottom`    +` margin:auto` 则可实现垂直居中
  left: 0;      // 只需要`left = right`    +` margin:auto` 则可实现水平居中
  right:0;
  bottom:0;
  margin:auto;
}

[innerWang]

4. 使用 绝对定位和 margin-top margin-left

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

.parent{
  border: 1px solid red;
  height: 300px;

  position:relative;
}

.child {
  border: 1px solid green;
  height: 50px;
  width:50px;

  position: absolute;
  top: 50%;
  left: 50%;
  margin-top:-25px;    //此处若使用百分比，是指父元素尺寸的百分比
  margin-left:-25px;
}

[innerWang]

5. 使用 ::after / ::before + vertical-align+ display:inline-block

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

   
   .parent{
   border: 1px solid red;
   height: 300px;
   
   text-align:center;
   }

.child { border: 1px solid green; height: 50px; width:50px;

display: inline-block; vertical-align: middle; }

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

[innerWang]

6: 使用table标签

<table class="parent">
   <tr>
     <td class="child">aaaaaaaaaa</td>
     <td class="child">aaaaaaaaaa</td>
   </tr>
</table>

.parent{
  border: 1px solid red;
  height: 300px;
}

.child {
  border: 1px solid green;
}

[innerWang]

7. 使用 display: table table-cell 和 vertical-align

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

   
   .parent{
   border: 1px solid red;
   height: 300px;
   
   display:table;
   }

.child{ border: 1px solid blue;

display:table-cell; vertical-align: middle; }