css在百分比高度时，文字水平垂直居中

最新推荐文章于 2022-05-28 14:01:10 发布

b286588411

最新推荐文章于 2022-05-28 14:01:10 发布

阅读量628

点赞数 1

原文链接：http://www.cnblogs.com/webwrangler/p/8979343.html

版权

给需要垂直居中的文字增加一个父元素,给父元素设置 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

b286588411

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css在百分比高度时，文字水平垂直居中

给需要垂直居中的文字增加一个父元素,给父元素设置display:table;给需要居中的子元素设置vertical-align:middle; display:table-cell; 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset=...
复制链接

扫一扫