CSS中使用负margin值来调整居中位置
作者:互联网
2026-04-11
这或许是最常用的居中方法。如果知道了各个元素的大小,设置等于宽高一半大小的负margin值(如果没有使用box-sizing: border-box样式,还需要加上padding值),再配合top: 50%; left: 50%;样式就会使块元素居中。
需要注意的是,这是按照预想情况也能在工作在IE6-7下的唯一方法。
CSS Code复制内容到剪贴板- .is-Negative{
- width:300px;
- height:200px;
- padding:20px;
- position:absolute;
- top:50%;left:50%;
- margin-left:-170px;/*(width+padding)/2*/
- margin-top:-120px;/*(height+padding)/2*/
- }
好处:
浏览器兼容性非常好,甚至支持IE6-7 需要的编码量很少
同时注意:
这是个非响应式的方法,不能使用百分比的大小,也不能设置min-/max-的最大值最小值。 内容可能会超出容器 需要为padding预留空间,或者需要使用box-sizing: border-box样式。
相关推荐
专题
+ 收藏
+ 收藏
+ 收藏
+ 收藏
+ 收藏
+ 收藏
最新数据
相关文章
WebSocket 连接池生产级实现:实时行情高可用与负载均衡
04/18
使用 Python 合并与拆分 Excel 单元格的实用方法
04/18
Pandas数据清洗完整指南:8大核心技巧详解
04/17
NumPy+Pandas数据分析基础完全指南
04/17
AI Agent 接入 Zvec (一):MCP 篇
04/17
python 更新Obsidian
04/17
用Manim实现动态交点计算--从一个动点问题说起
04/17
用 AI 解决数据库性能问题的方法论
04/17
前端害怕被蒸馏 快速入门Python 【demo_03】
04/17
Python 操作 Word 文档节与页面设置
04/16
AI精选
