纯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>
时间： 2024-07-28 23:04:20