CSS - 實現垂直居中的幾種方式

1. 元素爲未知寬高的元素
flex
http://www.ruanyifeng.com/blo...

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

translate

position: absolute;
top:50%;
left:50%;
width:100%;
transform:translate(-50%,-50%);
text-align: center;

flex和margin:auto

.box{
    display: flex;
    text-align: center;
}
.box span{margin: auto;}

2. 元素爲爲定寬定高（自身包含尺寸的元素）的元素
絕對定位和負邊距

position: absolute;
width:100px;
height: 50px;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-25px;

絕對定位和0
原理：當一個絕對定位元素，其對立定位方向屬性同時有具體定位數值的時候，流體特性，具備流體特性絕對定位元素的margin:auto的填充規則和普通流體元素如出一轍

width: 50%; 
  height: 50%; 
  background: #000;
  overflow: auto; 
  margin: auto; 
  position: absolute; 
  top: 0; left: 0; bottom: 0; right: 0;

參考：
https://www.cnblogs.com/hutuz...
https://www.zhangxinxu.com/wo...