【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>
相关推荐
熊出没12 分钟前
Vue前端导出页面为PDF文件
前端·vue.js·pdf
VOLUN12 分钟前
Vue3项目中优雅封装API基础接口:getBaseApi设计解析
前端·vue.js·api
用户990450177800926 分钟前
告别广告干扰,体验极简 JSON 格式化——这款工具让你专注代码本身
前端
前端极客探险家29 分钟前
告别卡顿与慢响应!现代 Web 应用性能优化:从前端渲染到后端算法的全面提速指南
前端·算法·性能优化
袁煦丞1 小时前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆1 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记1 小时前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆1 小时前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
用户21411832636021 小时前
dify案例分享-Dify v1.6.0 重磅升级:双向 MCP 协议引爆 AI 生态互联革命
前端
程序员海军1 小时前
AI领域又新增协议: AG-UI
前端·openai·agent