欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

margin:0 auto无效原因

程序员文章站 2022-05-11 08:17:00
...

1、没有给要居中的元素设置宽度
2、该元素position值为absolute
3、该元素设置了浮动属性

几点说明:

  • 对于有上下边偏移的相对定位的盒子,margin auto是有效的。
  • 对于有左右边偏移的相对定位的盒子,margin auto也是有效的,只是在居中的基础上会偏差一个left或right值。当left或right为0时,水平居中。
  • 当div宽高都设置了百分比,又设置margin:0 auto时,设置的高度值将无效。
  • 如果想使用百分比来设置宽高,又想居中,可以使用CSS3中的transform的translate转换属性

实现的css代码为:

.container {
 position: absolute;
 width: 80%;
 height: 90%;
 transform: translate(10%, 5%);
 border: solid;
}
相关标签: css css3