让绝对定位原素快速居中

chenjwjw 2012-05-01 09:26:12

根据绝对定位特点，假设某原素已设定位属性为绝对定位：position:absolute;那么该元素就会脱离正常文档流，此时设了绝对定位的元素的left,top,bottom,right的值如不设，默认并不是为0，该元素还会停留在原来的位置，只是不在正常文档流之中！同时该元素仍可以使用margin进行边距的偏移，而偏移的参照物就是其本身！因为绝对定位使用方向偏移再混合margin的方向偏移，两都同方向的值会累加！如left:20px;margin-left:20px;此时实际偏移的值是40px;根据这个规律，假如想让这个具有绝对定位的元素居中就有办法了！可以设：left:0px; right:0px; top:0px;而再设置margin:0px auto;即可使该元素靠上居中显示！这点在做顶部时也很方便哦！

...全文

148 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

kinghome 2012-05-02

打赏
举报

span {
width:100px; height:100px;
border:1px solid red;
position:absolute;
left:50%;top:50%;
margin: -50px -50px;
}

happy59 2012-05-02

打赏
举报

span {
width:100px; height:100px;
border:1px solid red;
position:absolute; left:50%;
margin-left:-50px;/*50%宽度*/
}

ddcatlee 2012-05-02

打赏
举报

google -》绝对定位元素的box model

去圣西罗-为尤文喝彩 2012-05-02

打赏
举报

001007009 2012-05-01

打赏
举报

光看这个方法，起初表示怀疑，虽说absolute之后，margin有效，但是用0 auto来居中怎么会有效果？
top left right bottom同时出现有疑问，因为之前也遇到过类似问题，同时出现的话，只有left，top有效，换句话説left top 比 right bottom的优先级高。

测试了下，在ff下居然真的句中了，但是ie6下却无动于衷。



<!DOCTYPE HTML>

<html>

	<head>

		<meta charset="gb2312" />

		<title></title>

		<style>

			span {

				width:100px; height:100px;

				border:1px solid red;

				position:absolute; left:0; top:0; right:0; bottom:0;

				margin:0 auto;

			}

		</style>

	</head>

	<body>

		<span>123</span>

	</body>

</html>

由于上面对4个方向的作用提出了质疑，于是又测试了下，把right删除了，ff却不居中了，可见right是起了作用的，确实有些疑惑，再思考下。



<!DOCTYPE HTML>

<html>

	<head>

		<meta charset="gb2312" />

		<title></title>

		<style>

			span {

				width:100px; height:100px;

				border:1px solid red;

				position:absolute; left:0; top:0; bottom:0;

				margin:0 auto;

			}

		</style>

	</head>

	<body>

		<span>123</span>

	</body>

</html>