html 居中布局

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

<div class="content1"></div><div class="content2"></div><div class="content3"></div>

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

.content1,.content2,.content3{width:960px;margin:0 auto;}

这样，三个内容都居中了。然后，当content1 内容里面的h1,距离顶部有50个像素的时候，怎么写？

<div class="content1">    <h1 class="title"></h1><div>

第一反应，用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结构：

<div class="content">    <div class="content1"><h1 class="title"></h1></div>     <div class="content2"></div>    <div class="content3"></div></div>

用content 来让所有内容居中

.content{width:960px;margin:0 auto;}

通过content1 的padding 属性，实现title距离顶部50px

.content1{padding-top:50px;}

content1 ,content2,content3 通过浏览器自动计算宽度，从而就避免繁琐的计算

xiong:计算宽度实在太费脑力，多利用块级元素会自动延展的特性