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

浏览数：57 / 时间：2015年06月09日

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

 

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style html log ha it display ca har class style html log ha it display ca har

相关文章

随机文章

您可能还喜欢

您可能还喜欢