盒子居中的三种方法(最简单）

最新推荐文章于 2025-04-08 11:08:01 发布

原创最新推荐文章于 2025-04-08 11:08:01 发布 · 2.5w 阅读

90 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html #flex

本文介绍了三种实现CSS元素居中的方法：1) 利用定位（子绝父相）和margin调整；2) 使用transform属性简化代码；3) 应用Flex布局快速实现居中。每种方法都有其特点，其中Flex布局最为简洁且适应性强，而transform方法则在元素尺寸变化时保持代码不变。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.利用定位（子绝父相）、margin-left、和margin-top实现

子盒子相对于父盒子进行移动。在父盒子内，先移动父盒子宽的一半，再移动父盒子高的一半。此时的子盒子在父盒子的偏右下的位置，再次需要移动子盒子，将子盒子向左移动自身宽度的一半，再向上移动自身高度的一半。

缺点在于如果修改了子盒子的宽高，则就需要修改margin-left和margin-top的值

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

        .son {
            /* 子盒子设置绝对定位 */
            position: absolute;
            /* 向右、向下移动父盒子的一半 （偏移量） */
            left: 50%;
            top: 50%;
            /* 向左移动自身宽的一半，向上移动自身盒子高的一半 */
            margin-left: -100px;
            margin-top: -50px;
            width: 200px;
            height: 100px;
            background-color: pink;
        }

<div class="father">
    <div class="son"></div>
</div>

2.利用定位（子绝父相）、transfrom属性实现

原理与上图类似，只是利用位移来完成子盒子最后的移动，与上面方法的区别就在于，transfrom只用一句代码就可以实现，如果子盒子后期修改了宽高，居中的代码不用修改。

实现盒子居中效果：position: absolute; left: 50%; top: 50%;transform: translate(-50%, -50%);

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

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

3.利用flex布局实现盒子居中

相较于上面两种方法，这种方法最简单，也最实用，不过它会改变当前盒子内的布局

使用时只需给父盒子添加display: flex;（应用flex布局）justify-content: center;（主轴居中，默认水平方向）align-items: center;（侧轴居中，默认垂直方向）

.father {
            /* 给父盒子添加flex布局 */
            display: flex;
            /* 主轴居中 */
            justify-content: center;
            /* 侧轴居中 */
            align-items: center;
            width: 500px;
            height: 500px;
            /* 让父盒子水平居中 */
            margin: 0 auto;
            border: 3px solid #000;
        }

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