div css 如何实现div水平居中

使用DIV CSS 如何水平居中?很容易实现,水平居中使用  margin:0 auto; 

div-css-center

水平居中 效果图

 

代码如下:


<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>div css 水平居中</title>
<style>
body{ font-size:12px; font-family:"Microsoft Yahei";}
.w{margin-top:50px;}
.box{ width:300px;/*必须设置宽度*/ height:200px; background:#CCC; margin:0 auto; }
.tit{ text-align:center; padding-top:70px; font-size:16px;}
</style>
</head>

<body>
    <div class="w">
        <div class="box">
            <div class="tit">div css 水平居中 <br>zhoumo123.cn</div>
        </div>
    </div>
</body>
</html>

居中的div必须设置宽度,达到浏览器兼容性 代码头部必须有 文档声明  “<!doctype html>” ,添加 <!DOCTYPE> 声明,这样浏览器才能获知文档类型。