CSS中的水平居中、垂直居中方法

为大家总结了几种水平居中，垂直居中的方法，供大家快速使用：

水平居中：4种方法

• text-align：center+ display:inline-block 属性配合使用。
• display：table + margin：0，auto 属性配合使用
• absolute + transformX（-50%） 属性配合使用
• flex布局（比较灵活）：

              在父级要素设置样式display：flex； flex-direction：column；justify-content：center

              子类中的要素便会自动水平居中

 垂直居中：3种方法

• display：table-cell （父级要素）+ vertical-algin：center（子类要素）
• absolute + transform：translateY(-50%) 属性配合使用
• flex布局：

             在父级要素设置样式display：flex； align-items：center 

本文只列举了这几种（也是在尝试），但是再css中不仅仅只有这几种方法，就不一一列举，大家可以多尝试，也欢迎在评论区交流新的方法和其他见解。