如何让未知高度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
新闻热点
疑难解答
