标签：
div中的文本水平居中，一般都是用text-align:center;就可以解决，那么垂直居中呢，知道vertiacl-align:middle;但有时候却不起作用；整理下div中文本垂直居中对齐的问题（只是自己总结）
1.单行文本垂直居中对齐
① height=line-height即可；
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 </head> 7 <style type="text/css"> 8 *{margin: 0;padding: 0;} 9 .text{ 10 width: 200px; 11 height: 100px; 12 line-height:100px; 13 border:2px solid #eee; 14 margin: 20px auto; 15 text-align: center; 16 } 17 </style> 18 <body> 19 <div class="text">无意苦争春</div> 20 </body> 21 </html>
②通过padding值来调节，此时padding-top=padding-bottom,且padding-top+padding-bottom+div的height=真正想要的高度；
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 </head> 7 <style type="text/css"> 8 *{margin: 0;padding: 0;} 9 .text{ 10 width: 200px; 11 height: 100px; 12 padding: 40px 0; 13 border:2px solid #eee; 14 margin: 20px auto; 15 text-align: center; 16 } 17 </style> 18 <body> 19 <div class="text">无意苦争春</div> 20 </body> 21 </html>
2.多行文字
第一种和单行方法②一样；
第二种是将外部该div放到一空div里，该div display：table-cell;vertical:middle;
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 </head> 7 <style type="text/css"> 8 *{margin: 0;padding: 0;} 9 .texts{width: 602px;height: 100px;margin: 20px auto;border:1px solid #eee;} 10 .text{ 11 width: 200px; 12 height: 100px; 13 display: table-cell; 14 vertical-align: middle; 15 text-align: center; 16 border-left: 1px solid #eee; 17 } 18 .text:first-child{border-left: none;} 19 20 </style> 21 <body> 22 <div class="texts"> 23 <div class="text">无意苦争春</div> 24 <div class="text">一任群芳妒</div> 25 <div class="text">无意苦争春<br />一任群芳妒</div> 26 </div> 27 </body> 28 </html>
对于多行文本可以垂直居中的方法，
单行文本也可以垂直居中。
不过最后一种方法不兼容IE6/7。。。
目前只知道这些，先记录下来。
标签：
原文地址：http://www.cnblogs.com/MissBean/p/4291340.html
