一. 让图片（行内块元素）垂直居中：
1.在父级设置：行高 等于 高度，字体大小为0
line-height: 1rem;
height: 1rem;
font-size: 0;
2.图片自己设置：
vertical-align: middle;
Table 合并行了之后，需要文字居中，也可以使用。
3.vertical-align 的用法
vertical-align: top / middle / ...... 很多属性可以在调试器里调试，这里不详细介绍。
最近发现一个新写法，能解决所有属性都用过了依然不是想要的高度时使用：
vertical-align: -0.2em ，同理px、rem都行，直接用单位肉眼对齐，很舒心。
二. 常用的垂直、左右居中：
1.四个方向偏移量为 0 ，然后 margin 设置为 auto
.dad {
position: relative;
}
.son { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; }
2.绝对定位，上和左50%，再利用 margin 反向移动宽高的一半
.dad {
position: relative;
}
.son { 100px; height: 100px; position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; }
3.绝对定位，上和左50%，再利用 translate 反向移动50%
.dad { position: relative; } .son { 100px; height: 100px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) }
4.父级 flex 布局
#dad { display: flex; justify-content: center; align-items: center; }
三. 文字的居中
height = line-height，text-align: center，就不用说了，最近发现，尤其是<button>按钮，设置border之后对文的上下居中会有影响。
解决办法：使用计算属性calc，减掉下行高。
测试代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- <script src="./echarts.js"></script> -->
<!-- <link rel="stylesheet" href="./index.css"> -->
<style>
* {
margin: 0;
padding: 0;
}
div {
border: 0.01rem solid red;
padding: 0.5rem;
}
span {
font-size: 0.16rem;
}
.button {
font-size: 0.16rem;
padding: 0 0.5rem;
cursor: pointer;
border-radius: 0.01rem;
border: 0.2rem solid red;
color: #FFFFFF;
background: #427AFF;
display: inline-block;
height: 2rem;
text-align: center
}
.button1 {
line-height: 2rem;
}
.button2 {
line-height: calc(2rem - 0.2rem);
}
.button3 {
line-height: calc(2rem - 0.4rem);
}
</style>
</head>
<body>
<div>
<span>测试边框对文字对齐的影响</span>
<button class="button button1">确定</button>
<button class="button button2">取消</button>
<button class="button button3">返回</button>
</div>
</body>
</html>