纯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>

 

你可能感兴趣的:(垂直居中)