标签：ali 水平 居中 div table corn height 高度 idt
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 7 <title>css百分比高度文字水平垂直居中</title> 8 <style type="text/css"> 9 *{ 10 margin: 0; 11 padding: 0; 12 } 13 html,body,.wrap{ 14 height: 100%; 15 background: cornflowerblue; 16 font-size: 30px; 17 } 18 .content{ 19 height: 100%; 20 display: table; 21 margin: 0 auto;/*控制文字水平居中*/ 22 } 23 .text{ 24 height: 100%; 25 vertical-align: middle; 26 display: table-cell; 27 } 28 </style> 29 </head> 30 <body> 31 <div class="wrap"> 32 <div class="content"> 33 <div class="text"> 34 css百分比高度文字水平垂直居中 35 </div> 36 </div> 37 </div> 38 </body> 39 </html>
标签：ali 水平 居中 div table corn height 高度 idt
原文地址：https://www.cnblogs.com/webwrangler/p/8979343.html
