学步园

1 新的布局

<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
	$(function()
	{
		var w = 400;
		var h = 50;
		$("#top").css("border","solid black 1px");
		$("#top").css("color","red");
		$("#top").css("position","absolute");
		$("#top").css("width",w).css("height",h);

		var x = ($(window).width()-w)/2;
		var y = ($(window).height()-h)/2;
		$("#top").css("top",y).css("left",x);
		alert("x"+x+",y"+y);
		$("#top").attr("align","center");
		
	});
</script>

2

结果

3 此处还有一个不完美的地方，当屏幕改变大小的时候，不会自动居中

更改的方法是

把上句的 

$("#top").css("top",y).css("left",x);

改为

$("#top").css("margin","0 auto");