未知高度元素的垂直居中（js实现）

未知高度元素的垂直居中（js实现）
作者：Neoxone 发表时间： 2009年04月28号，星期二阅读：6,674 次

未知高度（即高度不确定）元素的垂直居中，虽说这个布局的实际应用不是很多，但在网上讨论的却很多，而且往往联系到某公司的招聘题。
这里有提供纯CSS的做法：点这里
下面通过js实现

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>未知高度元素的垂直居中方法（JS）</title>
<style type="text/css">
*{padding:0;margin:0;}
html,body{height:100%;}
#box{border:1px solid #ccc;position:absolute;left:50%;top:50%;}
</style>
</head>
<body>
<div id="box">
<p>谁还记得是谁先说　永远的爱我　
<p>以前的一句话是我们　以后的伤口
<p>过了太久没人记得　当初那些温柔　
<p>我和你手牵手说要一起　走到最后
<p>我们都忘了　这条路走了多久　
<p>心中是清楚的　有一天　有一天都会停的
<p>让时间说真话　虽然我也害怕　
<p>在天黑了以后　我们都不知道　会不会有以后
<p>我们都累了　却没办法往回走　
<p>两颗心都迷惑　怎么说　怎么说都没有救
<p>亲爱的为什么　也许你也不懂　
<p>两个相爱的人　等着对方先说　想分开的理由
<p>谁还记得爱情开始变化的时候　
<p>我和你的眼中看见了　不同的天空
<p>走得太远终于走到　分岔路的路口　
<p>是不是你和我　要有两个　相反的梦
</div>
</body>
<script type="text/javascript">
$id=function(o){
	return document.getElementById(o) || o;
}
function vMiddle(inner){
	var outer = (inner.parentNode.tagName == 'body') ?  document.documentElement : inner.parentNode;
	var innerHeight = inner.offsetHeight,
		innerWidth = inner.offsetWidth,
		outerHeight = outer.offsetHeight ,
		outerWidth = outer.offsetWidth ;
		(outerHeight > innerHeight) ? (function(){
			inner.style.marginTop = -innerHeight/2 + "px" ;
			inner.style.top = "50%";
		})()
		: (function(){
			inner.style.marginTop = 0;
			inner.style.top = 0;
		})();
		(outerWidth > innerWidth) ?  (function(){
			inner.style.marginLeft = -innerWidth/2 + "px" ;
			inner.style.left = "50%";
		})()
		: (function(){
			inner.style.marginLeft = 0;
			inner.style.left = 0;
		})();
}
window.onload = window.onresize = function(){
	vMiddle($id("box"));
}
</script>
</html>

上面的垂直居中演示，是相对于整个屏幕来说的。
如果是在另外某个元素中垂直居中，那么这个父级元素需确定尺寸，并且它是定位元素（relative/absolute）。

标签：垂直居中