如何让未知高度div垂直居中:
让div垂直居中对齐方法有多种多样，可以使用CSS让div在父元素中垂直居中，但是如果在不知道div高度的情况下将其在父元素中实现它的垂直居中对齐有难度，因为涉及到浏览器兼容性，下面就介绍一下通过js让未知高度的div在父元素中垂直居中，代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<style type="text/css">
#parent{
width:200px;
height:200px;
background-color:red;
overflow:hidden;
}
#children{
width:60px;
height:60px;
background-color:green;
margin:0px auto;
}
</style>
<script type="text/javascript">
window.onload=function(){
var parentH=document.getElementById("parent").offsetHeight;
var childrenH=document.getElementById("children").offsetHeight;
document.getElementById("children").style.marginTop=((parentH-childrenH)/2)+"px";
}
</script>
</head>
<body>
<div id="parent">
<div id="children"></div>
</div>
</body>
</html>
以上代码实现了子元素在父元素中的垂直居中效果，代码比较简洁，也没有CSS需要兼容各个浏览器的困扰。
下面介绍一下实现过程:
一.实现原理:
通过js分别获取父元素和子元素的的高度，这样就可以通过js设置子元素的上面外边距实现将子元素在父元素中居中。
二.代码分析:
1.document.getElementById("parent").offsetHeight获取父元素的高度。
2.document.getElementById("children").offsetHeight获取子元素的高度。
3.document.getElementById("children").style.marginTop可以设置子元素的上外边距。
4.parentH-childrenH)/2，父元素的高度减去子元素的高度再除以2就恰好让子元素垂直居中于父元素中。
原文地址:http://www.51texiao.cn/javascriptjiaocheng/2015/0405/136.html
时间： 2024-10-22 15:26:23