让盒子水平居中解决方法！！！---（块元素，行内元素，行内块，文本）

作者: 如此情话
来源: 51数据库
2021-08-11

如何让盒子水平居中

在开发中我们会经常需要让一个盒子进行水平居中来达到某种效果，水平居中也是我们在开发中用到最多的！

1.让块级元素水平居中

HTML

    <div class="box">
        我是box盒子
        <div class="one">我是one盒子</div>
    </div>

CSS

        <style>
            .box {
                width: 300px;
                height: 300px;
                background-color: cornflowerblue;
                margin: 0 auto;/* 在浏览器中水平居中 */
            }
            .one{
                width: 100px;
                height: 100px;
                background-color: #ff6600;
                margin: 0 auto; /* 给子盒子添加margin属性实现在父盒子中水平居中 */
            }
        </style>

效果如下：
//为了让大家看的更清楚添加了文字，所以one盒子会距离上面有一段距离。

让块级盒子居中的方法非常简单，就是给块元素的盒子一个margin：0 auto属性。

2.让行内元素，行内块元素文本在盒子内进行水平居中

HTML

 <div class="box">
        <span>我是行内元素</span>
    </div>

CSS

<style>
        .box {
            width: 300px;
            height: 300px;
            background-color: cornflowerblue;
            text-align: center;/* 让文本水平居中 */
        }
</style>