导航

让未知宽高的元素水平垂直居中

Posted on 2018-02-10 16:12  小飞博客  阅读(180)  评论(0编辑  收藏  举报
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>让未知宽高的元素水平垂直居中</title>
 6 </head>
 7 <style>
 8     #wrap{
 9         display: table;
10         height: 400px;
11     }
12     #content{
13         display: table-cell;
14         vertical-align: middle;
15         border:1px solid #FF0099;
16            background-color:#FFCCFF;
17            width:760px;
18     }
19     p{
20         font-size:12px;
21         font-family:tahoma;
22         text-align: center;
23     }
24 </style>
25 <body>
26     <div id="wrap">
27         <div id="content">
28             <p>我要水平垂直居中,别管我有几行</p>
29             <p>我要水平垂直居中,别管我有几行</p>
30             <p>我要水平垂直居中,别管我有几行</p>
31             <p>我要水平垂直居中,别管我有几行</p>
32             <p>我要水平垂直居中,别管我有几行</p>
33             <p>我要水平垂直居中,别管我有几行</p>
34         </div>
35     </div>
36 </body>
37 </html>