如果 .parent 的 height 不写，只需要 padding: 10px 0; 就能将 .child 垂直居中；
如果 .parent 的 height 写死了，就很难把 .child 居中，以下是垂直居中的方法。
注意：能不写 height 就千万别写 height。
1-1. table自带功能
<style>
.father{
border: 1px solid #0a3b98;
height: 600px;
}
.son{
background: #f0a238;
}
</style>
<table class="father">
<tr>
<td class="son"></td>
</tr>
</table>
1-2. div 装成 table
<style>
div.table {
display: table; //把不是table的元素变为table
border: 1px solid red;
height: 600px;
}
div.td {
display: table-cell; //把元素变成td
border: 1px solid blue;
vertical-align: middle; //垂直对齐方式（1-1中已自带）
}
.child {
border: 1px solid black;
}
</style>
<div class="table">
<div class="td">
<div class="child"></div>
</div>
</div>
2. absolute margin auto
定位 + margin:auto ：父级为相对定位，子级绝对定位，并且四个定位属性的值都设置了0，那么这时如果子级未设置宽高，则会被拉开到和父级一样宽高。这里子元素设置了宽高，所以宽高会按设置来显示，但是实际上子级的虚拟占位已经撑满了整个父级，这时候再给它一个 margin：auto 它就可以上下左右都居中。
<style>
.father{
width: 500px;
height: 300px;
border: 1px solid #0a3b98;
position: relative; // 父级相对定位
}
.son{
width: 100px;
height: 40px;
background: #f0a238;
position: absolute; // 子级绝对定位
top: 0; // 以下四个定位属性设为0
left: 0;
right: 0;
bottom: 0;
margin: auto; // 外边距自动
}
</style>
<div class="father">
<div class="son"></div>
</div>
3. margin-top -50%
定位 + margin:负值 ：绝大多数情况下，设置父元素为相对定位，子元素移动自身50%实现水平垂直居中。
<style>
.father {
position: relative;
width: 200px;
height: 200px;
background: skyblue;
}
.son {
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px; //margin: -50px 0 0 -50px;
width: 100px;
height: 100px;
background: red;
}
</style>
<div class="father">
<div class="son"></div>
</div>
初始位置为方块1；当设置left和top为50%的时候，内部子元素为方块2的位置；设置margin为负数时，使内部子元素到方块3的位置，把图片的中心点位于父元素的中心点。
这种方案不要求父元素的高度，也就是即使父元素的高度变化了，仍可保持在父元素的垂直居中位置，水平方向上是一样的操作。但是该方案需要知道子元素自身的宽高。可通过下面transform属性进行移动。
4. translate -50%
定位 + transform ： translate(-50%, -50%)将会将元素位移自己宽度和高度的-50%。这种方法其实和margin负值用法一样，可以说是margin负值的替代方案，并不需要知道自身元素的宽高。
<style>
.father {
position: relative;
width: 200px;
height: 200px;
background: skyblue;
}
.son {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100px;
height: 100px;
background: red;
}
</style>
<div class="father">
<div class="son"></div>
</div>
5. flex
<style>
.father {
display: flex; //该容器内部的元素将按照flex进行布局
justify-content: center; //垂直居中
align-items: center; //这些元素将相对于本容器水平居中
width: 200px;
height: 200px;
background: skyblue;
}
.son {
width: 100px;
height: 100px;
background: red;
}
</style>
<div class="father">
<div class="son"></div>
</div>
6. grid布局
<style>
.father {
display: grid;
align-items: center;
justify-content: center;
width: 200px;
height: 200px;
background: skyblue;
}
.son {
width: 10px;
height: 10px;
border: 1px solid red；
}
</style>
<div class="father">
<div class="son"></div>
</div>
