CSS: Canh DIV Luôn Ở Trung Tâm (Make Div Always In Middle and Center)

Canh một thẻ div lun nằm giữa một thẻ div khác, dù thẻ div bên ngoài có thay đổi chiều cao hay chiều dài bao nhiêu đi chăng nữa, thì thẻ div bên trong vẫn phải luôn nằm ở giữa, ta xem ví dụ bên dưới.
Yêu Cầu: Ta có một thẻ DIV cha, bên trong có thẻ DIV con có chiều dài là 80x80 và thẻ DIV con này lun nằm ở chính giữa thẻ DIV cha, không quan tâm chiều dài rộng của thẻ DIV cha

1. Ta dùng display: flex vs margin: auto;
HTML

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

CSS

.parent {
  width: 300px;
  height: 300px;
  background: yellow;
  display: flex;
}
.child {
  background: red;
  width: 80px;
  height: 80px;
  margin: auto;
}

2. Dùng display: table-cell vs verticle-align: middle
HTML

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

CSS

.parent {
  width: 300px;
  height: 300px;
  background: yellow;
  display: table-cell;
  vertical-align: middle;
}

.child {
  background: red;
  width: 80px;
  height: 80px;
  margin: auto;
}

3. Dùng display: flex, justify-content: center vs align-items: center trong css
HTML

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

CSS

.parent {
  display: flex;
  background: yellow;
  width: 300px;
  height: 300px;
  justify-content: center;
  align-items: center;
}
.child {
  background: red;
  width: 80px;
  height: 80px;
}

4. Ta dùng table in html 
HTML

<table>
  <tr>
    <td>
      <div class="child"></div>
    </td>
  </tr>
</table>

CSS

table {
  border: none;
}
td {
  background: yellow;
  width: 300px;
  height: 300px;
  /*vertical-align: center; default of td*/
}
.child {
  width: 80px;
  height: 80px;
  background: red;
  margin: auto;
}

5. Ta dùng position: relative vs calc trong css 
HTML

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

CSS

.parent {
  background: yellow;
  width: 300px;
  height: 300px;
}
.child {
  background: red;
  position: relative;
  width: 80px;
  height: 80px;
  margin: auto;
  top: calc(50% - 40px);
}