爱周末 » 水平居中 http://zhoumo123.cn 知识分享，共同进步。zhoumo123.cn Thu, 07 Nov 2019 05:53:49 +0000 zh-CN hourly 1 http://wordpress.org/?v=4.0.1 div css 如何实现div水平居中 http://zhoumo123.cn/web/css/225.html http://zhoumo123.cn/web/css/225.html#comments Sun, 10 Aug 2014 01:24:22 +0000 http://zhoumo123.cn/?p=225 使用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> 声明，这样浏览器才能获知文档类型。

]]> http://zhoumo123.cn/web/css/225.html/feed 1