CSS实现盒子模型水平居中的方法_hbuider盒子模型居中-优快云博客

本文介绍了CSS水平居中的六种实现方法。包括margin+width、text-align+inline-block、float+position等，每种方法都给出了适用场景和代码示例，适用于已知宽度或宽度不固定的盒子，帮助开发者解决CSS水平居中问题。

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

水平居中效果图
水平居中
全局样式

    .parent {
        color: #FFFFFF;
        height: 200px;
        width: 200px;
        margin: 0 auto;
        background-color: #000000;
    }

    .child {
        width: 50px;
        height: 50px;
        background-color: #26f12d;
    }

第一种：margin+width

这种方法适用于已经知道width的盒子，实现起来比较简单

    .child {
        width: 50px;
        margin: 0 auto;
    }

第二种：text-align+inline-block

这种方法适用于多种场景（width不固定）

    .parent {
        text-align: center;
    }
    .child {
        display: inline-block;
    }

第三种：float+position

这种方法适用于多种场景（width不固定）

    .between {
        position: relative;
        left: 50%;
        float: left;
    }
    .child {
        position: relative;
        right: 50%;
    }

第四种：

这种方法适用于多种场景（width不固定）

    .parent {
        position: relative;
    }
    .between {
        position: absolute;
        left: 50%;
    }
    .child {
        position: relative;
        right: 50%;
    }

第五种：flex

这种方法适用于多种场景（width不固定）

    .parent {
        display: -webkit-box;
        -webkit-box-pack: center;
        -webkit-box-orient: horizontal;
    }

第六种：fit-content

这种方法适用于多种场景（width不固定）

    .between {
        width: -webkit-fit-content;
        margin: 0 auto;
    }
---------------------