来源 : http://www.iteye.com/topic/609383
还有一贴 :http://justcoding.iteye.com/blog/584186
昨天考完试,今天太无聊了,于是看了一下JavaScript,然后写了个让DIV水平和垂直方向都居中的JS。
Chrome 4.0.x、Firefox 3.6、IE 8 下正常。
Html代码 收藏代码
Js代码 收藏代码
还有一贴 :http://justcoding.iteye.com/blog/584186
昨天考完试,今天太无聊了,于是看了一下JavaScript,然后写了个让DIV水平和垂直方向都居中的JS。
Chrome 4.0.x、Firefox 3.6、IE 8 下正常。
Html代码 收藏代码
<!-- #main {
font-size:30px;
width:120px;
height:100px;
background:red;
} -->
<script src="test.js"></script>
<div id="main">测试文本</div></pre>
Js代码 收藏代码
//设置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";
}