如何用CSS+DIV做布局

1、左右布局

首先创建两个<div>，分别叫div1和div2,代码和效果如下

可以见到，即使div1和div2在同一行，因为div标签是块级元素，div1的宽会占满整个body，使得div2只能另起一行，达不到所想要左右布局的效果。这时候就需要用CSS来调节div1和div2的宽度，使其宽度刚好能占满整个body即可，代码如下：
div标签的默认display（展示）属性为block（区块），
把其修改成inline-block（线性区块），
并将width（宽度）改成50%，
修改完成后，div1和div2就处在一行并各占一半空间，
这时只需要在两个div中添加内容，
一个简单的左右布局就做成了。

2、左中右布局

大概做法同上，在div的margin（外边距）属性修改成-5px，width属性修改成33.3%，代码如下

3、水平居中

可用position属性来实现在浏览器窗口的水平居中,代码如下：

首先设置position为fixed，然后将top设置为50%，设置margin-top属性为被设置标签高度一半的负值作为补偿，此做法虽可保证标签水平居中，但其一，脱离文档流会导致排版混乱；二，该元素由于设置了fixed属性，会一直处于浏览器窗口的居中位置，不便于设计后之元素的内容格式。
所以在此介绍第二种水平居中方式，这种方式更为灵活，且不脱离文档流，代码如下：
可以用另外一个div包括住要居中的内容，并通过外层div标签的padding属性来居中要居中的内容。

4、垂直居中

直接在要居中的元素上加上margin：auto；
就能使元素居中于其父元素，代码如下：