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

html 复制代码
<body>
    <div class="main">
        <div class="box"></div>
    </div>
</body>
  1. 绝对定位加 margin: auto;
css 复制代码
<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>
  1. 绝对定位加负 margin:
css 复制代码
<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>
  1. margin 推动:
css 复制代码
<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>
  1. flex 居中:
css 复制代码
<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>
  1. transform:
css 复制代码
<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>
  1. 子盒子宽高不确定(需要保证left和right的百分数一样,top和bottom的百分数一样):
html 复制代码
<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>
相关推荐
SynthWriter4 分钟前
Trae 帮我生成了一个贪吃蛇的游戏,好玩儿
前端
用户214118326360217 分钟前
dify案例分享-Dify+RSS 聚合 8 大平台实时热点,新闻获取效率飙升 300%
前端
百锦再19 分钟前
Razor编程中@Html的方法使用大全
前端·html
啪叽22 分钟前
JavaScript可选链操作符(?.)的实用指南
前端·javascript
Ian在掘金22 分钟前
bat+python实现easy connect自动连接
前端·python
代码搬运媛25 分钟前
【react实战】如何实现监听窗口大小变化
前端·javascript·react.js
小桥风满袖27 分钟前
Three.js-硬要自学系列30之专项学习环境光
前端·css·three.js
Luckyfif30 分钟前
🤯由 性能指标 散发开来的 Performance API 被问爆了呀
前端·面试·性能优化
咸虾米33 分钟前
在uniCloud云对象内使用unipay的微信退款出现错误“uniPayCo.refund Error: token校验未通过”的解决方案
前端·后端
前端Hardy39 分钟前
HTML&CSS:产品卡片动画效果
前端·javascript