不定宽高水平垂直居中

Posted 2020-09-22

 1 <div id="demo">
 2     <p>这是一个终极实现的水平垂直居中实例</p>
 3     <!--[if lt IE 8]><span></span><![endif]-->
 4 </div>
 5 #demo{
 6     height:100px;
 7     text-align:center;
 8     font-size:0;  //注意这里是去除文字间隔，放在内容宽度为100%时挤出换行
 9 }
10 #demo:after,#demo span{
11     display:inline-block;
12     *display:inline;
13     *zoom:1;
14     width:0;
15     height:100%;
16     vertical-align:middle;
17 }
18 #demo:after{
19     content:‘‘;
20 }
21 #demo p{
22     display:inline-block;
23     *display:inline;
24     *zoom:1;
25     vertical-align:middle;
26     font-size:16px;
27 }