给需要垂直居中的文字增加一个父元素,给父元素设置 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>
原文地址：https://www.cnblogs.com/webwrangler/p/8979343.html
时间： 2024-10-28 22:46:11