标签：
如何让未知高度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
标签：
原文地址：http://www.cnblogs.com/nulifendou/p/4639472.html
