讓一個不定寬高的 DIV，垂直水平居中

怎麼讓一個不定寬高的 DIV，垂直水平居中？

<div class="father">
	<div class="son"></div>
</div>

答：
1）使用 CSS 方法：

.father {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.son {
  display: inline-block;
  vertical-align: middle;
}

2）使用 CSS3 transform：

.father {
  position: relative;
}

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

3）使用 flex佈局：

.father {
  display: flex;
  justify-content: center;
  align-self: center;
}

.son {
 
}

4）使用 網格佈局：

.father {
  display: grid;
}

.son {
  justify-self: center;
  align-self: center;
}