纯CSS实现：垂直居中，未知宽高，已知宽高，IE5除外所有浏览器均兼容

纯CSS实现：盒子内元素垂直居中，宽高固定与否均可，IE5除外所有浏览器均兼容：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8" />
 5 <title>纯CSS实现：盒子内元素垂直居中，宽高固定与否均可，IE5除外所有浏览器均兼容</title>
 6 <style>
 7 *{ margin:0; padding:0; }
 8 div  { text-align:center; background:#f00; width:800px; height:300px; }
 9 div *{ height:100%; display:inline-block; vertical-align:middle; }
10 span { height:auto; background:#fff; }
11 </style>
12 </head>
13 <body>
14 <div>
15     <b></b>
16     <span>
17         text-align:center;<br/>
18         vertical-align:middle;
19     </span>
20 </div>
21 </body>
22 </html>

纯CSS实现：窗口元素水平垂直居中，宽高固定与否均可，IE5除外所有浏览器均兼容：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>纯CSS实现：窗口元素水平垂直居中，宽高固定与否均可，IE5除外所有浏览器均兼容</title>
<style>
*{ margin:0; padding:0; }
html,body { height:100%; }
body { text-align:center; }
body *{ height:100%; display:inline-block; vertical-align:middle; }
span { height:auto; *display:inline; background:#ccc; }
</style>
</head>
<body>
    <b></b>
    <span>
        text-align:center;<br/>
        vertical-align:middle;
    </span>
</body>
</html>

 

posted @ 2014-09-18 13:04  puexine  阅读(319)  评论(0)  编辑  收藏  举报