让div里面的多行文本垂直居中的方法：
div{height:100px;width:100px;border:solid 1px red;text-align:center; display:table-cell;vertical-align:middle}
下面是网上好不容易找的多种办法：
看到问此问题的很多，所以花点时间整理下，欢迎大家提意见，做补充修改，谢谢！
/*lesliezmz整理的方法 2010-01-19*/
当writing-mode为tb-rl 时，文档流是从上到下，从右到左书写。然后设置text-align: center就可以实现垂直方向上的居中。算是一个小技巧吧。
原帖链接：IE6下用writing-mode实现 未知高度替换元素垂直居中。
<!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> <title>利用定位来显示垂直局中的图片</title> <style type="text/css"> .miao { width:500px; height:220px; line-height:220px; border: 1px solid; text-align: center; } .miao img { vertical-align: middle; } </style> <!--[if IE 6]> <style type="text/css"> .miao span { border: 1px solid red; height: 100%; /* 要保证和父元素高度一样才行 */ writing-mode: tb-rl; vertical-align: middle; } </style> <![endif]--> </head> <body> <h1>固定高宽的容器中，图片垂直局中。</h1> <p>使用的绝对定位和相对定位的方法</p> <div class="miao"> <span><img src="http://bbs.blueidea.com/images/default/logo.gif" alt="Logo" /></span>你知道的太多了你知道的太多了你知道的太多了 </div> <hr /> <div class="miao"> <span><img src="http://bbs.blueidea.com/images/default/logo.gif" alt="Logo" /></span>你知道的太多了你知道的太多了你知道的太多了 </div> <hr /> <div class="miao"> <span><img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" alt="Google" /></span>你知道的太多了 </div> </body> </html>
/*yoom 粘贴开始 2010-01-18*/
因为Opera，FF3，IE8均支持display:talbe;这些特性了，因此改进的办法是：
<!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"> .miao{width:170px;height:100px;display:table;text-align:center;border:solid 1px red;} .miao span{display:table-cell;vertical-align:middle;border:solid 1px blue;} .miao span img{border:dashed 1px green;} </style> <!--[if lte IE 7]> <style type="text/css"> .miao{position:relative;overflow:hidden;} .miao span{position:absolute;left:50%;top:50%;} .miao span img{position:relative;left:-50%;top:-50%;} </style> <![endif]--> </head> <body> <h1>固定高宽的容器中，图片垂直局中。</h1> <p>绿色容器是span，目的是使自己的左上角与容器中心点对齐。红色是具体图片，再次设置负值使自己的中心点和父容器的中心点重合，最终达到垂直局中的目的。</p> <div class="miao"> <span><img src="http://bbs.blueidea.com/images/default/logo.gif" alt="Logo" /></span> </div> <hr /> <div class="miao" style="width:300px;height:80px;"> <span><img src="ttp://bbs.blueidea.com/images/default/logo.gif" alt="Logo" /></span> </div> <hr /> <div class="miao" style="width:500px;height:220px;"> <span><img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" alt="Google" /></span> </div> </body> </html>
如果不喜欢条件注释，可自行将代码以css hack的方式拼凑起来。
原帖链接：未知高宽的图片垂直局中
/*yoom 粘贴结束*/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <style type="text/css"> <!-- * {margin:0;padding:0} div { width:500px; height:500px; border:1px solid #ccc; overflow:hidden; position:relative; display:table-cell; text-align:center; vertical-align:middle } div p { position:static; +position:absolute; top:50% } img { position:static; +position:relative; top:-50%;left:-50%; width:276px; height:110px } --> </style> <div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>
标准浏览器下另类方法:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <style type="text/css"> <!-- body { margin:0;padding:0 } div { width:500px; height:500px; line-height:500px; border:1px solid #ccc; overflow:hidden; position:relative; text-align:center; margin:auto } div p { position:static; +position:absolute; top:50% } img { position:static; +position:relative; top:-50%;left:-50%; width:276px; height:110px; vertical-align:middle } p:after { content:".";font-size:1px; visibility:hidden } --> </style> <div><p><img src="http://www.google.com/intl/en/images/logo.gif"/></p></div>
标准浏览器严格型申明下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <style type="text/css"> <!-- * {margin:0;padding:0} div { width:500px; height:500px; line-height:500px; border:1px solid #ccc; overflow:hidden; position:relative; text-align:center; } div p { position:static; +position:absolute; top:50%; vertical-align:middle } img { position:static; +position:relative; top:-50%;left:-50%; width:276px; height:110px; vertical-align:middle } --> </style> <div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>
利用字体大小的方法：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <style type="text/css"> * {margin:0;padding:0;} div { width:500px;text-align:center;border:1px solid #f00;line-height:500px; height:500px;font-size:500px } *>div{ font-size:12px } div img { vertical-align:middle } </style> <div> <img src="http://www.google.com/intl/en/images/logo.gif" /> </div>
display:inline-block 方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <style type="text/css"> div { display:table-cell; height:300px; width:500px; text-align:center; border:1px solid #000; vertical-align:middle } </style> <!--[if IE]> <style type="text/css"> i { display:inline-block; height:100%; vertical-align:middle } img { vertical-align:middle } </style> <![endif]--> <div> <i></i> <img src="http://www.baidu.com/img/logo.gif" alt=""/> </div>
最简单当然是背景图片的方法拉。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <style type="text/css"> * {margin:0;padding:0;} div { width:500px;border:1px solid #f00; height:500px; background:url("http://www.google.com/intl/en/images/logo.gif") center no-repeat } </style> <div> </div>
