JavaScript未知高度元素的垂直居中


JavaScript未知高度元素的垂直居中代码，允许你在不知道外层元素高度的情况下，用Js强制其居中，虽然用了JavaScript有些麻烦，不过效果甚好，值得一试。

答案：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript未知高度元素的垂直居中的方法</title>
 <script type="text/javascript">
 function vMiddle(){
    var middleDiv=document.getElementById("wrap");
    var divHeight=middleDiv.offsetHeight;
    var bodyHeight=document.body.offsetHeight ;
    if(bodyHeight>divHeight)
      middleDiv.style.marginTop=-divHeight/2+"px";
   else{
      middleDiv.style.marginTop=0;
      middleDiv.style.top=0;
    }
}
</script>
<style type="text/css">
  html,body{height:100%;padding:0;margin:0;}
   #wrap{width:800px;margin:0 auto;border:1px solid red;position:absolute;top:50%;left:50%;margin-left:-400px;}
</style>
</head>
<body onload="vMiddle();">
<div id=wrap>
a<br/>
a<br/>
</div>
</body>
</html>

上一个：CSS结合JavaScript实现Li隔行换色代码
下一个：CSS美化表格边框为凹陷立体效果的实现方法

更多图片编程知识: