DIV水平和垂直居中

--博客备份

 

昨天考完试，今天太无聊了，于是看了一下JavaScript，然后写了个让DIV水平和垂直方向都居中的JS。
Chrome 4.0.x、Firefox 3.6、IE 8 下正常。

 

 

<!-- #main {
 		font-size:30px;
 		width:120px;
 		height:100px;
 		background:red;
 	} -->

	<script src="test.js"></script>

	<div id="main">测试文本</div></pre>

 

 

 

//设置div页面居中，参数为div的id
function autoMargin(id) {
	var marginWid;//保存margin结果
	var marginHei;
	var divWid;//居中的DIV的大小
	var divHei;
	var mainEle = document.getElementById(id);//要计算的div的对象

	//Trident内核
	if (new RegExp("trident", "i").test(navigator.userAgent)) {

		//获取可见域大小
		marginWid = document.documentElement.clientWidth;
		marginHei = document.documentElement.clientHeight;
		//document.write("trident" + width + "*" + height);

		//获取指定元素的宽和高
		divWid = mainEle.currentStyle.width.replace(/px/, "");
		divHei = mainEle.currentStyle.height.replace(/px/, "");
		//alert(divWid + "\n" + divHei);

	//Webkit和Gecko内核
	} else if (new RegExp("webkit", "i").test(navigator.userAgent)
			|| new RegExp("gecko", "i").test(navigator.userAgent)) {

		//获取可见域大小
		marginWid = window.innerWidth;
		marginHei = window.innerHeight;
		//document.write("webkit" + width + "*" + height);

		//获取指定元素的宽和高
		var style = window.getComputedStyle(mainEle, null);
		divWid = style.getPropertyValue("width").replace(/px/, "");
		divHei = style.getPropertyValue("height").replace(/px/, "");
		//alert(divWid + "\n" + divHei);
	}

	//计算margin大小
	marginWid = marginWid / 2 - divWid / 2;
	marginHei = marginHei /2 - divHei / 2;

	mainEle.style.marginTop = marginHei + "px";
	mainEle.style.marginLeft = marginWid + "px";
}

评论

9 楼 778856 2010-12-21  

诶 转眼间 Chrome都10了

8 楼 上善如水 2010-12-21  

偶然的发现，这样写也会水平垂直居中 text-align float:left;，虽然我所插得背景图片水平垂直居中，可是觉得不是很可定在别的浏览器上会怎样，所以没敢用。

7 楼 chemzqm 2010-04-05  

Ext中的写法：
Ext.fly('divid').alignTo(Ext.getBody(),'c-c')

6 楼 guoshuang 2010-03-14  

垂直用 line-height
水平 margin:0 auto(ie <7 用 body style="text-align:center" 内部容器 text-align:left)

5 楼 kjj 2010-03-11  

这太复杂了吧,科学点还是按照宽度和高度计算!!!

4 楼 gundumw100 2010-03-11  

感觉有点过头了

3 楼 天梯梦 2010-03-10  

http://newyorkphper.iteye.com/blog/584186

2 楼 happysoul 2010-03-10  

判断浏览器类型的方法早就淘汰了
现在只考虑W3C标准和BT的IE系列两种就够了
或者按照功能判断是否可用“xx方法” 比如 document.all FF就不兼容

1 楼 qingmao 2010-03-08  

我觉得这类效果用CSS来完成比较合算