这或许是最常用的居中方法。如果知道了各个元素的大小,设置等于宽高一半大小的负margin值(如果没有使用box-sizing: border-box样式,还需要加上padding值),再配合top: 50%; left: 50%;样式就会使块元素居中。
CSS中使用负margin值来调整居中位置

需要注意的是,这是按照预想情况也能在工作在IE6-7下的唯一方法。

CSS Code复制内容到剪贴板
  1. .is-Negative {       
  2.         width: 300px;       
  3.         height: 200px;       
  4.         padding: 20px;       
  5.         position: absolute;       
  6.         top: 50%; left: 50%;       
  7.         margin-left: -170px; /* (width + padding)/2 */      
  8.         margin-top: -120px; /* (height + padding)/2 */      
  9. }      

  好处:

    浏览器兼容性非常好,甚至支持IE6-7
    需要的编码量很少

  同时注意:

    这是个非响应式的方法,不能使用百分比的大小,也不能设置min-/max-的最大值最小值。
    内容可能会超出容器
    需要为padding预留空间,或者需要使用box-sizing: border-box样式。


标签:
CSS,margin,居中

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“CSS中使用负margin值来调整居中位置”

暂无“CSS中使用负margin值来调整居中位置”评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。