【CSS】div 盒子居中的常用方法

秀秀_heo

已于 2024-02-01 16:01:19 修改

阅读量931

点赞数 2

分类专栏： CSS 文章标签： css css3 前端

于 2023-11-04 22:09:17 首次发布

本文链接：https://blog.csdn.net/XiugongHao/article/details/134223991

版权

CSS 专栏收录该内容

53 篇文章 2 订阅

订阅专栏

本文介绍了CSS中的几种布局方法，包括绝对定位配合margin:auto实现居中，负margin在定位中的应用，margin推动元素，flex布局实现弹性盒对齐，以及transform用于调整元素位置。通过实例展示了如何处理不同情况下的子盒子布局。

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

<body>
    <div class="main">
        <div class="box"></div>
    </div>
</body>

绝对定位加 margin: auto; ：

<style>
    * {
        padding: 0;
        margin: 0;
    }
    .main {
        width: 400px;
        height: 400px;
        border: 2px solid #000;
        position: relative;
        margin: 30px auto;
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: #f00;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
</style>

绝对定位加负 margin：

<style>
    * {
        padding: 0;
        margin: 0;
    }
    .main {
        width: 400px;
        height: 400px;
        border: 2px solid #000;
        position: relative;
        margin: 30px auto;
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: #f00;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -50px;
        margin-left: -50px;
    }
</style>

margin 推动：

<style>
    * {
        padding: 0;
        margin: 0;
    }
    .main {
        width: 400px;
        height: 400px;
        border: 2px solid #000;
        margin: 30px auto;
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: #f00;
        margin: 150px 150px;
    }
</style>

flex 居中（弹性盒）：

<style>
    * {
        padding: 0;
        margin: 0;
    }
    .main {
        width: 400px;
        height: 400px;
        border: 2px solid #000;
        margin: 30px auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: #f00;
    }
</style>

transform：

<style>
    * {
        padding: 0;
        margin: 0;
    }
    .main {
        width: 400px;
        height: 400px;
        border: 2px solid #000;
        margin: 30px auto;
        position: relative;
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: #f00;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
</style>

子盒子宽高不确定（需要保证left和right的百分数一样，top和bottom的百分数一样）：

<style>
    * {
        padding: 0;
        margin: 0;
    }
    .main {
        width: 400px;
        height: 400px;
        border: 2px solid #000;
        margin: 30px auto;
        position: relative;
    }
    .box {
        background-color: #f00;
        position: absolute;
        left: 25%;
        top: 25%;
        right: 25%;
        bottom: 25%;
    }
</style>

<body>
    <div class="main">
        <div class="box"></div>
    </div>
</body>