您当前位置：首页 > web前端 > htmlcss > CSS+DIV网页居中的常见两种方法

CSS+DIV网页居中的常见两种方法

来源：程序员人生发布时间：2014-02-02 06:08:49 阅读次数：2522次

例如：.html文件代码如下，

以下为引用的内容：
<html>
<head>
<title>居中DIV</title>
</head>
<body>
<div id="mainDiv>
居中的div
</div>
</body>
</html>

则实现居中的方法CSS代码为第一种方法：

以下为引用的内容：
body
{
text-align:center ;
background-color:#ccc;
min-width:780px;
}
#mainDiv
{
width:760px;
border:1px solid white;
margin:0 auto
}

第二种：负空白边定位法实现的CSS代码为

以下为引用的内容：
body {
text-align:center
background-color:#ccc;
min-width:780px;
}
#mainDiv
{
width:760px;
margin-left:-380px;
left:%50;
positive:relative;
border:1px solid white
}

　　好了，有人会问为什么要使用“min-width”属性来定义body的最小宽度呢？，而且其最小宽度要大于或等于div的宽度。如果不怎样，可能会出现页面的内容被挤出浏览器的可视区域，具体这是为什么这个是浏览器的问题，各种浏览器对CSS 的支持有少许不同。

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 雨泽博客：解读百度《搜索引擎优化指南》

下一篇 CSS教程：相对、绝对定位及布局和浮动

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点