首页 > 代码库 > 纯CSS实现：垂直居中，未知宽高，已知宽高，IE5除外所有浏览器均兼容
纯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>
纯CSS实现：垂直居中，未知宽高，已知宽高，IE5除外所有浏览器均兼容
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。