元素常见的居中方式

1.行内文字居中，未设置高度，定位，浮动的情况下失效

    text-align：center，水平居中

    line-height: 行高，垂直居中

2.表格内元素的居中

    text-align：center，水平居中

    vertical-align：middle，垂直居中

3.元素水平居中，父元素和居中元素设置宽

    使用外边距：margin：0 auto；

    使用定位：position：absolute；（父元素也要定位）

                      left：50%；

                      margin-left：-width/2 或者 transform：translateX（-50%）；

    使用外边距2：margin-left: 50%；

                           transform：translateX（-50%）；

4.元素垂直居中，父元素和居中元素设置高

    使用定位：position：absolute；

                      top：50%；

                      margin-top：-height/2 或者 transform：translateY（-50%）；

    使用外边距：margin-top：50%；

                          transform：translateY（-50%）；

5.元素水平垂直居中

    使用外边距：margin-top：50%；

                         margin-left：50%；

                         transform：translate（-50%，-50%）；

          适用于未知宽高的元素

    使用定位1：position：absolute；

                        left：50%；

                        top：50%；

                        margin-left：-width/2；

                        margin-top：-height/2；

           适用于已知宽高的元素

    使用定位2：position：absolute；

                        left：50%；

                        top：50%；

                        transform：translate（-50%，-50%）；

          适用于未知宽高的元素

    使用定位加外边距：position：absolute；

                                     top：0；

                                     bottom：0；

                                     left：0；

                                     right：0；

                                     margin：auto；

         适用于已知宽高的元素

    使用弹性盒模型：display：flex；

                                 justify-content：center；

                                 align-items：center；

         适用于未知宽高的元素，兼容性好

    使用表格属性：父元素：display：table-cell；

                                           vertical-align：middle；

                             子元素：text-align：center； 

         适用于未知宽高情况下，但是float，position时会失效

使用内联块+伪元素生成的content：父元素：text-align：center；

                                                         父元素:before ：content："."；

                                                                                    display：inline-block；

                                                                                    vertical-align：middle；

                                                         子元素：display：inline-block；

                                                                       vertical-align：middle；

          适用于未知宽高的元素，兼容性好，可自适应，但是水平居中要考虑换行符的问题