使用width,max-width和margin:auto;

在前面章节提到过,块级元素总是占有可用的宽度(尽可能的向左右延伸).

设置块级元素的宽度将阻止它伸展到其容器的边缘. 然后,您可以将margin设置为auto,以使元素在其容器内水平居中. 元素将占用指定的宽度，剩余的空间将在两个边距之间平均分配:

注意:当浏览器窗口小于元素的宽度时,上面的<div>会出现问题.浏览器会在页面里添加水平滚动条。

在这种情况下,使用max-width属性将改进浏览器对小窗口的处理. 当网站页面在小尺寸的屏幕上显示时很管用:

提示:将浏览器窗口的宽调整为小于500px,以查看两个div之间的差异!

以下是上面两个div的示例：