黑马程序员技术交流社区

标题: css块级盒子居中的五种方法 [打印本页]

作者: 哈哈哈大喇叭 时间: 2018-9-14 13:16
标题: css块级盒子居中的五种方法
用自己的表达方式简单罗列一下五种块级盒子居中的方法，希望能帮助到大家

第一种
水平居中：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；（测轴居中）

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2