您现在的位置是：网站首页> 编程资料编程资料

CSS中使用负margin值来调整居中位置css 布局 之 两端布局的实例代码 （利用父级负的margin）css如何利用负margin技术实现平均布局css布局之负margin妙用及其他实现css利用负margin实现平均布局的示例

2021-09-05 1047人已围观

简介 这篇文章主要介绍了CSS中使用负margin值来调整居中位置的方法,文中同时提到了这种常用方法的一些值得注意的地方,需要的朋友可以参考下

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

需要注意的是，这是按照预想情况也能在工作在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做到完全居中的超级攻略CSS中的垂直和水平居中完全指南CSS中垂直居中的简单实现方法CSS实现定位元素居中的方法

下一篇：CSS居中效果之transform的使用css3 transform属性详解CSS中使用负margin值来调整居中位置仅使用CSS做到完全居中的超级攻略

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网