css布局基础:margin:0 auto 局中问题

很久没有写日记了，归根结底是很久没有学习了，一直都在工作，一直用到margin居中，也郁闷很了很久，网上看了大把的问答，最后自己就着一个例子，然后研究了一下，其实div居中不那么难！

复制一下代码到记事本，修改为html后缀的文件。

代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css布局基础:margin:0 auto 局中问题</title>
</head>

<body>
<div style="height:300px; background:#ccc;">
        <div style="width:50px; height:50px; background:#f00; margin:0 auto;"></div>
</div>
</body>
</html>

 

打开页面 发现小方块没有居中！然后我们在DW新建一个默认页面（文档类型选择：XHTML 1.0 Transitional），复制它的头部申明信息

代码
<!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>无标题文档</title>
</head>

<body>
<div style="height:300px; background:#ccc;">
        <div style="width:50px; height:50px; background:#f00; margin:0 auto;"></div>
</div>
</body>
</html>

 

 

运行即可！ 虽然很简单，但是很实用，分享给大家。