2010六月27
CSS 水平居中之相对定位与负边距法
CSS水平居中的方法有很多。现在最常用的大概就是margin加上text-align的组合了。
不过条条大道通罗马，条条小路通我家。今天还看到一个使用相对定位与负边距来使元素水平居中的方法。之前咋没玩过，乍一看还挺不理解。后来自己捉摸了一会儿，还画了两张图，终于理解了。-_-!!!
大家先来看代码，然后再看图：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DIV 水平居中</title>
<style>
div#wrap {
position: relative;
width: 760px;
left: 50%;
margin-left: -380px;
border: 1px solid #333;
background-color: #ccc;
}
</style>
</head>
<body>
<div id="wrap">
<p>
这是一个p标签里的元素
</p>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DIV 水平居中</title>
<style>
div#wrap {
position: relative;
width: 760px;
left: 50%;
margin-left: -380px;
border: 1px solid #333;
background-color: #ccc;
}
</style>
</head>
<body>
<div id="wrap">
<p>
这是一个p标签里的元素
</p>
</div>
</body>
</html>
首先我们可以想一下，使元素位于水平居中是一个什么过程。大家看一下一个页面的中间点在哪？注意中间的竖线哦。
所以我们先把要居中的元素相对于其原来位置向右移个50%。
现在，看元素已经放在了页面的中间位置，但是并未居中。居中呢就是整个元素的中心点正好与页面的中心线重叠。于是我再将元素margin-left改为其宽度的一半，当然为了往左挪这个偏移量是负数。
文章作者：simaopig
本文地址：http://www.xiaoxiaozi.com/2010/06/27/1779/
版权所有 © 转载时必须以链接形式注明作者和原始出处！
坐个沙发~
前来学习一下
[回复]
margin定义在CSS中很常用
[回复]
哈哈，学习了。以前总是为居中的事情而头疼（特别是IE6），看了此文对水平居中又有新的认识了。
[回复]
@荒野无灯
哇，给予这么高的评价啊？呵呵。
[回复]
很不错，学习了。
[回复]
;-)
[回复]