css实现垂直居中
淘宝的招聘题里提到了垂直居中的方法。虽然大多数情况我们可以通过一些技巧避免这种情况，但有时还是会遇到这种问题（比如在面试中:)）。
垂直居中一直是非表格布局中的难点，下面我针对几种常见情况谈论一下。
单行文字垂直居中
这个很简单,设定行高为容器高度即可。
HTML:
-
<!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">
-
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
-
<title>单行垂直居中</title>
-
<style type="text/css">
-
*{
-
margin:0;
-
padding:0;
-
zoom:1;
-
}
-
body{
-
text-align:center;
-
font:normal 12px/180% Verdana, Arial, Helvetica, sans-serif;
-
}
-
.box{
-
width:500px;
-
height:400px;
-
border:1px solid #000;
-
line-height:400px;
-
}
-
</style>
-
</head>
-
-
<div class="box">
-
单行文字居中<br />
-
</div>
-
</body>
-
</html>
单行图片垂直居中
如上设定行高之后，标准浏览器和ie7下已经可以垂直居中，但是ie6还不行。所以，需要利用font-size属性修正这个问题。
HTML:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
<title>This is a test page!</title>
-
<style type="text/css">
-
*{margin:0;padding:0;
-
zoom:1;}
-
body{
-
text-align:center;
-
font-size:12px;
-
}
-
.box{
-
width:500px;
-
height:400px;
-
border:1px solid #000;
-
text-align:center;
-
line-height:400px;
-
margin:0 auto;
-
overflow:hidden;
-
font-size:12px!important;
-
font-size:360px;
-
}
-
.box img{
-
vertical-align:middle;
-
}
-
</style>
-
</head>
-
<div class="box">
-
<img src="http://canque.rssidea.com/wp-content/uploads/rabbit.thumbnail.jpg" alt=""/>
-
</div>
-
</body>
-
</html>
这种办法的缺点是灵活性不高，需要根据不同的情况调整font-size的值。
图文垂直居中（一）
图文垂直居中主要是利用css中的display:table-cell。在标准浏览器下，指定容器的display:table-cell后，就可以利用vertical-align:middle来实现垂直居中。但很遗憾，ie不支持。幸运的是，有人已经利用一下小技巧实现这个效果，利用css来模拟表格。
HTML:
-
<!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">
-
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
-
<title>图文垂直居中</title>
-
<style type="text/css">
-
<!--
-
*{margin:0;padding:0;zoom:1;}
-
body{
-
text-align:center;
-
font-size:12px;
-
}
-
.valign{
-
width:500px;
-
height:400px;
-
border:1px solid #000;
-
display:table-cell;
-
text-align:center;
-
vertical-align:middle;
-
}
-
/*解决ie下垂直居中问题*/
-
.valign .fix,.valign .container{display:table-cell;*display:inline; zoom:1;text-align:center;vertical-align:middle;width:500px;}
-
.valign .fix{width:1px;margin-right:-1px;height:100%;}
-
-->
-
</style>
-
</head>
-
<div class="valign">
-
<div class="container">
-
<img src="http://canque.rssidea.com/wp-content/uploads/rabbit.thumbnail.jpg" />
-
<p>这些文字用来测试图文情况下的垂直居中</p>
-
</div>
-
<div class="fix"></div>
-
</div>
-
</body>
-
</html>
图文垂直居中（二）
虽然上面的实现已经符合要求了，但是，却引入了多余的数据，并且结构也稍显复杂。因此，我们使用javascript来改善文档结构。这样不影响页面结构，而且在客户端不支持javascript的时候可以正常访问。需要说明的是,这段javacript只是示例代码,在处理复杂页面时会很占资源,在实际使用时需要优化。比如prototype就提供getElementsByClassName的方法。
HTML:
-
<!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">
-
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
-
<title>图文垂直居中</title>
-
<style type="text/css">
-
<!--
-
*{margin:0;padding:0;zoom:1;}
-
body{
-
text-align:center;
-
font-size:12px;
-
}
-
.valign{
-
width:500px;
-
height:400px;
-
border:1px solid #000;
-
display:table-cell;
-
text-align:center;
-
vertical-align:middle;
-
}
-
/*解决ie下垂直居中问题*/
-
.valign .fix,.valign .container{display:table-cell;*display:inline; zoom:1;text-align:center;vertical-align:middle;width:500px;}
-
.valign .fix{width:1px;margin-right:-1px;height:100%;}
-
-->
-
</style>
-
</head>
-
<div class="valign">
-
<img src="http://canque.rssidea.com/wp-content/uploads/rabbit.thumbnail.jpg" />
-
<p>这些文字用来测试图文情况下的垂直居中</p>
-
</div>
-
<li class="valign">
-
<img src="http://canque.rssidea.com/wp-content/uploads/rabbit.thumbnail.jpg" />
-
<p>这些文字用来测试图文情况下的垂直居中</p>
-
</li>
-
<li class="valign">
-
<img src="http://canque.rssidea.com/wp-content/uploads/rabbit.thumbnail.jpg" />
-
<p>这些文字用来测试图文情况下的垂直居中</p>
-
</li>
-
</ul>
-
<script language="javascript">
-
divArray=document.getElementsByTagName("*");
-
for(var i=divArray.length-1;i>=0;i--){
-
if(divArray[i].className=="valign"){
-
}
-
}
-
</script>
-
</body>
-
</html>
以上代码在xp环境下，ie6,ie7,firefox2,opera9下测试通过，基本上可以应付常见的应用。但是，如果是大量数据的排列呢？或者我的页面需要在不同环境下有高度的一致性？我的答案是：使用表格。
这里还有另外一种方法：CSS实现完美垂直居中
赠品：javascript实现的getElementsByClassName函数。
JavaScript:
-
function getElementsByClassName(className, tag, elm){
-
var testClass = new RegExp("(^|\\\\s)" + className + "(\\\\s|$)");
-
var tag = tag || "*";
-
var elm = elm || document;
-
var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
-
var returnElements = [];
-
var current;
-
var length = elements.length;
-
for(var i=0; i<length; i++){
-
current = elements[i];
-
if(testClass.test(current.className)){
-
returnElements.push(current);
-
}
-
}
-
return returnElements;
-
}
[…] 原理大家可以看看这篇文章： css实现垂直居中大同小异。 […]