一列固定宽度居中

来源：互联网发布：手机淘宝网链接打不开编辑：程序博客网时间：2024/04/29 18:50

说明一：页面居中是常用的网页设计表现形式之一，传统的表格式布局中，用align="center"属性来实现表格居中显示。但是div本身也支持align="center"属性，同样可以实现居中，但是WEB标准化时代，这个不是我们想要的结果。因为不能实现表现与内容的分离。align对齐属性是一种样式代码，书写在div属性中，有违于分离原则。

说明二：margin属性用于控制对象的上、右、下、左四个方向的外边距。当margin用2个参数时，第一个参数表示上下边距，第二个参数表示左右边距，其中有个auto值表示让浏览器自动判断边距。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>1列固定宽度居中</title><style type="text/css">#layout{background-color:#cccccc;border:2px solid #333333;width:300px;height:300px;margin:0px auto;}/*这里设置margin:0px auto，此时浏览器会把div的左右边距设置为相等的值，然后呈现出居中状态。*/</style></head><body><div id="layout"></div></body></html>