html整体布局居中,html 居中布局

需求，有三个内容需要居中显示

内容居中，我们太熟悉了：)

.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:计算宽度实在太费脑力，多利用块级元素会自动延展的特性