本文介绍了CSS中盒子居中的方法，强调了使用margin:0 auto;时的注意事项，包括盒子必须有明确宽度、仅适用于标准流中的元素等。同时对比了通过父元素padding与子元素margin来调整间距的效果。
2.盒子居中
margin:0 auto;
margin的值可以为auto，表示自动. 当left、right两个方向，都是auto的时候，盒子居中了：
注意：
1） 使用margin:0 auto; 的盒子，必须有width，有明确的width
2） 只有标准流的盒子，才能使用margin:0 auto; 居中。
也就是说，当一个盒子浮动了、绝对定位了、固定定位了，都不能使用margin:0 auto;
3） margin:0 auto;是在居中盒子，不是居中文本。
文本的居中，要使用text-align:center;
3.多使用父亲的padding，少使用儿子的margin
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 300px;
height: 250px;
background-color: orange;
}
p{
width: 100px;
height: 100px;
background-color: green;
margin-top: 30px;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
运行效果：
这里没有设置父类的padding，子元素设置margin-top: 30px;想要与父元素的间距为30px，可以看到是不能实现的。如果设置父类烦人padding，这里设置父类div为padding-top: 50px;
此时运行效果：
此时子元素与父元素的间距为80px。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
