最简单的div+css居中布局
发布时间：2010年3月30日 文章分类：xhtml+css 文章作者：Hitomi 浏览次数：次
比如你要对<div id="mytags"></div>进行居中处理
那么需要在<head></head>中添加如下代码
XML/HTML代码
- <style type="text/css">
- #mytags{width:520px;background:#F00;margin:0 auto;}
- </style>
其中
width:520px;是让这个div宽度是520像素，不写这个的话div是100%宽，看不出居中
background:#F00;是让这个div背景颜色为红色，不写这个背景是白的，也看不出居中
最后
margin:0 auto;是外边距，其中0是上边距和下边距，auto是左和右，意思就是左右边距都是自适应，所以就居中了！
同学们明白了吗？
完整代码如下：
XML/HTML代码
- <!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=gb2312" />
- <title>CSS控制布局居中</title>
- <style type="text/css">
- #mytags{width:520px;background:#F00;margin:0 auto;}
- </style>
- </head>
- <body>
- <div id="mytags"></div>
- </body>
- </html>
转载请注明出处：風山漸（刘超）原创
