让多个盒子居中显示的方法：

最新推荐文章于 2023-04-24 18:58:07 发布

匸幺乚

最新推荐文章于 2023-04-24 18:58:07 发布

阅读量1.9k

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/XL202108041100/article/details/119667634

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

方法一：用flex布局里面的

   <style>
        .box {
            border: 1px solid red;
        }

        .container {
            display: flex;
            height: 200px;
            border: 1px solid blue;

            /* 让一个盒子居中 */

            /* 在主轴方向居中 */
            justify-content: center; 
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
</body>

方法二：用定位+移动让浮动的盒子水平居中；

如果一个用了浮动的多个盒子想要居中，需要在盒子外层嵌套一个盒子，然后用子绝父相。

 <style>
        .box {
            float: left;
            height: 100%;
            border: 1px solid red;
        }

        .bgbox {
            position: absolute;
            top: 0;
            left: 50%;
            height: 100%;
            transform: translate(-50%, 0);
        }

        .container {
            position: relative;
            height: 200px;
            border: 1px solid blue;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="bgbox">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
        </div>
    </div>
</body>

匸幺乚

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
让多个盒子居中显示的方法：

方法一：用flex布局里面的 <style> .box { border: 1px solid red; } .container { display: flex; height: 200px; border: 1px solid blue; /* 让一个盒子居中 */ /* 在主轴方向居.
复制链接

扫一扫

专栏目录