css 居中布局

最新推荐文章于 2024-09-14 15:56:08 发布

爱吃甜不辣

最新推荐文章于 2024-09-14 15:56:08 发布

阅读量149

点赞数 1

分类专栏： css 文章标签： css css3

本文链接：https://blog.csdn.net/qw161323/article/details/124809050

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中实现元素居中的五种常见方法：1) absolute+transform，2) 弹性盒布局，3) 绝对定位法，4) 负margin居中法，5) 不确定宽高定位。每种方法都有其适用场景和特点，如弹性盒布局的灵活性，绝对定位法的兼容性等。通过实例代码展示了每种方法的具体实现，供开发者参考和选择。

摘要由CSDN通过智能技术生成

方法一：absolute+transform（定位+动画translate）

/* 方法一：absolute+transform */
    .father {
      /* 给父盒子设置相对定位 */
      position: relative;
      width: 500px;
      height: 500px;
      /* 让父盒子水平居中 */
      margin: 0 auto;
      border: 2px solid #000;
    }

    .son {
      /* 子盒子设置绝对定位 */
      position: absolute;
      /* 向右、向下移动父盒子的一半 （偏移量） */
      left: 50%;
      top: 50%;
      /* 向左移动自身宽的一半，向上移动自身盒子高的一半 */
      width: 200px;
      height: 300px;
      /* 出处：css translate动画； 说明：translate若使用百分比，是相对于自身的比例的位移 “-”负号向左上角位移 */
      transform: translate(-50%, -50%);
      background-color: pink;
    }

2、方法二：弹性盒居中布局（比较灵活，代码多，注意弹性盒兼容问题，建议使用）

/* 方法二：弹性盒居中布局 */
    .father {
      /* 设置为弹性盒 */
      display: flex;
      /* 设置主轴的对齐方式 */
      justify-content: center;
      /* 设置辅轴的对齐方式 */
      align-items: center;
      width: 500px;
      height: 500px;
      /* 让父盒子水平居中 */
      margin: 0 auto;
      border: 2px solid #000;
    }

    .son {
      width: 100px;
      height: 300px;
      background-color: pink;
    }

3、方法三：绝对定位法（比较灵活，代码多，兼容性好，建议使用）

/* 方法三：绝对定位法 */
    .father {
      /* 父盒子设置相对定位 */
      position: relative;
      width: 500px;
      height: 500px;
      /* 让父盒子水平居中 */
      margin: 0 auto;
      border: 2px solid #000;
    }

    .son {
      /* 子盒设置绝对定位 */
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      margin: auto;
      width: 100px;
      height: 300px;
      background-color: pink;
    }

4、方法四：负margin居中法（需要计算宽高，不建议使用）

/* 方法四：负margin居中法 */
    .father {
      /* 父盒子设置相对定位 */
      position: relative;
      width: 500px;
      height: 500px;
      /* 让父盒子水平居中 */
      margin: 0 auto;
      border: 2px solid #000;
    }

    .son {
      /* 子盒设置绝对定位 */
      position: absolute;
      /* 子盒向右位移父盒宽度的一半像素 */
      top: 50%;
      /* 子盒向下位移父盒高度的一半像素 */
      left: 50%;
      /* 子盒向上位移自身高的一半像素 */
      margin-top: -150px;
      /* 子盒向左位移自身宽的一半像素 */
      margin-left: -50px;
      width: 100px;
      height: 300px;
      background-color: pink;
    }

5、不确定宽高定位（比较灵活，代码多，兼容性好，建议使用）

/* 方法五：负margin居中法 */
    .father {
      /* 父盒子设置相对定位 */
      position: relative;
      width: 500px;
      height: 500px;
      /* 让父盒子水平居中 */
      margin: 0 auto;
      border: 2px solid #000;
    }

    .son {
      /* 子盒设置绝对定位 */
      position: absolute;
      left: 25%;
      right: 25%;
      top: 25%;
      bottom: 25%;
      margin: auto;
      width: 100px;
      height: 300px;
      background-color: pink;
    }

（ps：内容来源：参考前辈大佬；主要作为笔记使用，欢迎各位大佬纠正指导，欢迎沟通交流；）