关于多行垂直居中两三事

平时我们碰到垂直居中大多用line-height的方法不过这只针对单行或单个图片管用如果是多行或图文混排就不好用了

有米有解决方案当然有:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>多行文本垂直居中--三叶草的博客</title>
<style type="text/css">
body{font:12px/18px Verdana, Arial, "宋体", sans-serif;}
#a { width:300px;height:300px;background: #ccc;display:table-cell;vertical-align:middle;}
</style>
<!--[if IE]>
<style type="text/css">
#a{position: relative;}
#a .b {position:absolute;top:50%;}
#a p {position:relative;top:-50%;}
</style>
<![endif]-->
</head>
<body>
	<div id="a">
		<div class="b">
			<p>多行文本垂直居中,标准浏览器下只需 display:table-cell;vertical-align:middle; 即可. 而IE中则需要添加额外的标签 通过相对绝对定位来实现垂直居中</p>
		</div>
	</div>
</body>
</html>

演示:http://demo.idealoft.net/center.html
另外在单个图片垂直居中的时候 IE6里面line-height是没有用的所以最兼容的解决方案还是淘宝给出的答案:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
 <style type="text/css">
.box {
    display: table-cell;
    vertical-align:middle;
    width:200px;
    height:200px;
 margin: 0 auto;
    text-align:center;
    /* hack for ie */
    *display: block;
    *font-size: 175px;
    /* end */
    border: 1px solid #333;
}
.box img {
    vertical-align:middle;
}

</style>
</head>

<body>

<div class="box">
    <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" />
</div>
</body>
</html>

吹衣轻飏