需求，有三个内容需要居中显示
内容居中，我们太熟悉了：)
.content1,.content2,.content3{
width:960px;
margin:0 auto;
}
这样，三个内容都居中了。然后，当content1 内容里面的h1,距离顶部有50个像素的时候，怎么写？
第一反应，用margin
.title{
margin-top:50px;
} 但是，紧邻的块级元素会发生margin collapse 。这样导致的实际效果是content1的div具体上面50px。怎么办？还有别的办法吗？
在content1 用padding
.content1{
padding-top:50px;
} 这样会发现，content1 内容宽变成960+50。根据盒模型，不要忘了。，如果坚决要用这个方法，可以如下写：
.content1{
width:910px;
} 效果是能达到，但是，如果页面有很多这样的元素，你将花大量的时间去计算width-padding 。
其实还有更好的办法：
改一下html结构：
用content 来让所有内容居中
.content{width:960px;margin:0 auto;}
通过content1 的padding 属性，实现title距离顶部50px
.content1{padding-top:50px;}
content1 ,content2,content3 通过浏览器自动计算宽度，从而就避免繁琐的计算
xiong:计算宽度实在太费脑力，多利用块级元素会自动延展的特性
如果觉得《html整体布局居中 html 居中布局》对你有帮助，请点赞、收藏，并留下你的观点哦！
