div中字垂直居中对齐

时间：2023-01-16 15:14:52

div中的文本水平居中，一般都是用text-align:center;就可以解决，那么垂直居中呢，知道vertiacl-align:middle;但有时候却不起作用；整理下div中文本垂直居中对齐的问题（只是自己总结）
1.单行文本垂直居中对齐
① height=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>

 </head>

 <style type="text/css">

         *{margin: 0;padding: 0;}

         .text{

                 width: 200px;

                 height: 100px;

                 line-height:100px;

                 border:2px solid #eee;

                 margin: 20px auto;

                 text-align: center;

         }

 </style>

 <body>

 <div class="text">无意苦争春</div>

 </body>

 </html>

②通过padding值来调节，此时padding-top=padding-bottom,且padding-top+padding-bottom+div的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>

 </head>

 <style type="text/css">

         *{margin: 0;padding: 0;}

         .text{

                 width: 200px;

                 height: 100px;

                 padding: 40px 0;

                 border:2px solid #eee;

                 margin: 20px auto;

                 text-align: center;

         }

 </style>

 <body>

 <div class="text">无意苦争春</div>

 </body>

 </html>

2.多行文字
第一种和单行方法②一样；
第二种是将外部该div放到一空div里，该div display：table-cell;vertical:middle;

 <!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>

 </head>

 <style type="text/css">

         *{margin: 0;padding: 0;}

         .texts{width: 602px;height: 100px;margin: 20px auto;border:1px solid #eee;}

         .text{

                 width: 200px;

                 height: 100px;

                 display: table-cell;

                 vertical-align: middle;

                 text-align: center;

                 border-left: 1px solid #eee;

         }

         .text:first-child{border-left: none;}

 </style>

 <body>

 <div class="texts">

         <div class="text">无意苦争春</div>

         <div class="text">一任群芳妒</div>

         <div class="text">无意苦争春<br />一任群芳妒</div>

 </div>

 </body>

 </html>

对于多行文本可以垂直居中的方法，
单行文本也可以垂直居中。
不过最后一种方法不兼容IE6/7。。。
目前只知道这些，先记录下来。

相关文章