固定浮动定位之fixed

网页中如下图,需要在页面底部中间固定一个块,当然用positon:fixed来控制,然后bottom:0px;能让其在底部,但是在中间怎么处理呢?

固定浮动定位之fixed_第1张图片


最先想到的是用js或者jquery算屏幕的宽度A,然后减去红色框的宽度B,那么它的left值为(A-B)/2 px;

其实有更简单的,只需要css来控制,代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">  
	<head>
		<style>
		.test
		{
			border:1px solid red;
			position:fixed;
			bottom:0px;
			bottom:0px;
			left:0px;
			right:0px;
			margin:auto auto;
			height:50px;
			width:200px;
		}
		</style>
	</head>
<body>
	<div class="test"></div>
</body>
</html>



重要之处就是left:0px;right:0px;margin:auto auto;

经测试在ie8、9、10,chrom、firefox中均正常

你可能感兴趣的:(固定浮动定位之fixed)