给需要垂直居中的文字增加一个父元素,给父元素设置 display:table;
给需要居中的子元素设置 vertical-align:middle; display:table-cell;
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>css在百分比高度时，文字水平垂直居中
原文地址：https://www.cnblogs.com/webwrangler/p/8979343.html