CSS网页布局：div水平居中的各种方法

来源：远方教程作者：远方教程发布时间：2015-03-03 查看次数：4696　访问[新版]

　　二、相对定位与负的边距
　　对于wrap进行相对定位，然后使用负的边距抵消偏移量。这种方法比较简单还很容易实现：

#wrap {
position:relative;
width:760px;
left:50%;
margin-left:-380px
}
　　这段代码的意思是，设置wrap的定位是相对于其父元素body标签的，然后将其左边框移动到页面的正中间（也就是left:50%含意）；最后我们再从中间位置向左偏移回一半的距离来，这样就实现了水平居中了。

<!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>
<title> CSS+Div实现水平居中对齐的页面布局 </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
div#wrap {
position:relative;
width:760px;
left:50%;
margin-left:-380px;
border:1px solid #333;
background-color:#ccc;
}
</style>
</head>

<body>
<div id="wrap">
在所有浏览器中都有效的方法：
<pre>
div#wrap {
position:relative;
width:760px;
left:50%;
margin-left:-380px;
border:1px solid #333;
background-color:#ccc;
}

</pre>
</div>
</body>
</html>

　　同样，在设定水平居中前你需要设定一个固定的宽度。

　　P.S.究竟选择哪个方法？

　　上面两个方法究竟选择哪种方法好呢？在第一种方法中貌似使用了Hack技术，其实并没有，它是中规中矩的Web标准写法，完全符合规范，因此，两个种方法中完全可以随便的选取其中的任一种进行使用，他们不存在CSS hack的问题。

第1页 第2页 第3页