让元素在容器中垂直居中的几种方法

vertical-align实现垂直居中的方法
1 img添加个同级元素span而且在一行，不在一行的话给父级加上white-space:nowrap 去掉换行识别
2.给span加上高度与父级同高度
3 转换为display：inline-block
4添加vertical-align
5再给img添加vertical-align
6给父亲添加text-align：center
通过定位position
给元素设置
position：absolute；
给容器设置position：relative；
1
top:0; bottom:0; left:0 right:0 ； margin：auto；
2 top：50%; left:50; 通过margin 或者translate 位移 向上向左移动自身的一半值
推荐translate 属性）
容器一般都是被子元素撑开的设置margin 会影响内部的元素或者会有margin-top传递给父级

通过设置行高的方法（不推荐）
给容器添加 text-align：center 属性 水平居中
然后设置 跟容器同高的 line-height 属性
切记 text-align 使 行内元素居中， 行内块元素居中

弹性盒布局居中方法
将容器转换为弹性盒布局 display：flex；
给容器添加 justify-content：center； 水平方向居中
align-items：cneter； 垂直方向居中；