实现块级元素水平垂直居中的方法总结

1.通过给子元素添加margin

注意:此方法只能用于子元素为块级元素或者行内块元素
······不能用于子元素为行内元素的情况 因为行内元素设置垂直方向的auto没有效果

通过给父级元素设置padding

注意:此方法只能用于子元素为块级元素或者行内块元素
······不能用于子元素为行内元素的情况 因为行内元素无固定宽高

3.text-align: center;于vertical-align: middle;配合使用

给父元素添加text-align: center可以让其内的行内元素行内块元素以及文字水平居中，
给子元素添加vertical-align: middle;让它与文字行高的中线对齐 并且给父元素设置行高等于高度 即可达到子元素垂直居中效果
注意 此方法只能用于子元素为行内块的情况 因为只有行内块元素可以使用vertical-align属性

4.给父元素里面在添加一个行内块元素起到行高的作用

注意 此方法只能用于子元素为行内块的情况 因为只有行内块元素可以使用vertical-align属性

5.通过给子元素添加 position: absolute; 以及calc属性值

注意 calc中的百分比相对的是父元素

6.给子元素设置position: absolute 及margin负值

7.给子元素添加position: absolute及margin：auto

注意 给元素添加固定定位之后margin auto值会失效 但是可以通过设置 top right left botton 为0或者相对属性对等即可

8.给子元素添加position: absolute 及transform:tranlate属性

9.给父元素添加display flex