css水平垂直居中的方法

1、水平对齐+行高

text-align + line-height实现单行文本水平垂直居中

2、水平+垂直对齐

父元素设置text-align和vertical-align，并将父元素设置为table-cell元素，子元素设置为inline-block元素

注意：若兼容IE7-浏览器，将结构改为

3、margin + vertical-align

父元素中设置vertical-align，须设置为table-cell元素；要想让margin:0 auto实现水平居中的块元素内容撑开宽度，须设置为table元素。而table元素是可以嵌套在tabel-cell元素里面的，就像一个单元格里可以嵌套一个表格

注意：若兼容IE7-浏览器，需将结构改为

4、绝对定位

1、利用绝对定位元素的盒模型特性，在偏移属性为确定值的基础上，设置margin:auto

2、利用绝对定位元素的偏移属性和translate()函数的自身偏移达到水平垂直居中的效果

5、display:flex

1、在伸缩项目上使用margin:auto

2、在伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items

6、display:grid（注意：IE10不兼容）

1、在子元素中设置justify-self、align-self或者margin: auto

2、在父元素上设置justify-items、align-items或justify-content、align-conte