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。。。
目前只知道这些，先记录下来。
时间： 2024-10-20 12:08:51