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;
}
下一篇: CSS3文本溢出省略号
推荐阅读
-
CSS中margin: 0 auto;样式没有生效
-
比较text-align:center 和margin:0 auto
-
CSS中使用text-align、margin:0 auto居中的示例代码
-
PHP AutoLoad 自动加载机制分析实践 grand theft auto margin 0 auto 晓敏auto
-
CSS中margin: 0 auto;样式没有生效
-
div设置margin:0 auto;后弹出框错位,求解!_html/css_WEB-ITnose
-
margin :0px auto 无效_html/css_WEB-ITnose
-
margin:0 auto无效原因
-
PHP AutoLoad 自动加载机制分析实践 grand theft auto margin 0 auto 晓敏auto
-
css样式之元素position设为fixed/absolute/relative使用margin: 0 auto无效的解决方法