1、 文字居中：
第一种方式：当用text-align:center时，达到的是水平居中的效果，那再用vertical-align：middle；其实是实现不了垂直居中的，此时就需要用到display：table-cell去协助达到垂直居中的效果。 第二种方式：
text-align:center实现的是水平居中的效果，line-height高度要跟其元素设置的高度等同的情况下，才可以达到垂直居中的效果。
效果如下：
3、CSS中实现盒子水平垂直居中的方法
body {background-color: #6ed0ff; // 蓝色}.father {background-color: #be33ec; // 紫色border-radius: 20px; //圆角box-shadow: 0 0 15px rgb(0, 0, 0); //阴影margin: 100px auto;width: 300px;height: 300px;}.son {background-color: #fcff00; // 黄色border-radius: 20px;box-shadow: 0 0 10px rgb(0, 0, 0);width: 100px;height: 100px;}
原始效果：
要实现的效果：（黄色的盒子水平垂直居中）
方法一：
grid
.father {display: grid;}.son {align-self: center;justify-self: center;}
方法二：
absolute + 负margin
// 子绝父相.father {position: relative; //相对定位}.son {position: absolute; // 绝对定位left: 50%;top: 50%;margin-left: -50px;margin-top: -50px;}
方法三：
absolute + transform
.father {position: relative;}.son {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}
方法四：
absolute + margin: auto
.father {position: relative;}.son {position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;}
方法五：
flex
.father {display: flex; // 弹性盒子justify-content: center;align-items: center;}
方法六：
margin+transfrom
.father {overflow: hidden;}.son {margin: 50% auto;transform: translateY(-50%);}
方法七：
table-cell
.father {display: table-cell;text-align: center;vertical-align: middle;}.son {display: inline-block;}
方法八：
inline-block + vertical-align
.father {text-align: center;line-height: 300px;}.son {display: inline-block;vertical-align: middle;}
