用自己的表达方式简单罗列一下五种    块级盒子居中   的方法，希望能帮助到大家
第一种
水平居中：margin：0 auto；
垂直居中：margin-top：....px；（测量计算出顶部的距离）
第二种
父盒子：position：relative；
子盒子：position：absolute；
             left：50%；
             margin-left：-....px；（子盒子自身宽度的一半，注意是负值）
             top：50%；
             margin-top：-....px；（子盒子自身高度的一半，注意是负值）
第三种
父盒子：position：relative；
子盒子：position：absolute；
             left：50%；
             top：50%；
             transform：translate（-50%，-50%）；
第四种
父盒子：position：relative；
子盒子：position：absolute；
             left：0；
             top：0；

             right：0；
             bottom：0；
             margin：auto；
第五种（不用定位）
css伸缩盒子方式
父盒子：display：flex；
              justify-content：center；（主轴居中）
              align-items：center；（测轴居中）

用自己的表达方式简单罗列一下五种    块级盒子居中   的方法，希望能帮助到大家
第一种
水平居中：margin：0 auto；
垂直居中：margin-top：....px；（测量计算出顶部的距离）
第二种
父盒子：position：relative；
子盒子：position：absolute；
             left：50%；
             margin-left：-....px；（子盒子自身宽度的一半，注意是负值）
             top：50%；
             margin-top：-....px；（子盒子自身高度的一半，注意是负值）
第三种
父盒子：position：relative；
子盒子：position：absolute；
             left：50%；
             top：50%；
             transform：translate（-50%，-50%）；
第四种
父盒子：position：relative；
子盒子：position：absolute；
             left：0；
             top：0；

             right：0；
             bottom：0；
             margin：auto；
第五种（不用定位）
css伸缩盒子方式
父盒子：display：flex；
              justify-content：center；（主轴居中）
              align-items：center；（测轴居中）