CSS未知高度垂直居中

<!doctype html> <html>     <head>       <meta charset="utf-8" />       <meta content="IE=8" http-equiv="X-UA-Compatible"/>       <title> CSS垂直居中</title>       <style type="text/css">         .container{           width:500px;/*裝飾*/         height:500px;           background:#B9D6FF;           border: 1px solid #CCC;         }               </style>     </head>     <body>       <h1>垂直居中（table）</h1>       <div>         <table width="100%" height="100%">             <tr>                <td valign="middle">                   <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />                </td>            </tr>        </table>     </div>         </body>   </html>

好了，我們看其CSS實現。凡是table能做到的，CSS都能做的，但各瀏覽器在CSS的差異比較大，因此要相容它們難度很大。這涉及許多細節，各種流啊，display的表現效果與CSS hack，IE早些年搞了大堆的私有屬性，這也有待我們深一步挖掘。我們先看最簡單的實現，背景圖片法

背景圖片法

CSS未知高度垂直居中

<!doctype html> <html> <head> <title> CSS垂直居中</title> <style type="text/css"> .container {   width:500px;   height:500px;   line-height:500px;   background:#B9D6FF url(http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg)  no-repeat center center;   border:1px solid #f00;   text-align: center; }   </style>   </head> <body> <h1>垂直居中</h1> <div>      </div> </body> </html>

CSS表示式法

<html>     <head>       <meta charset="utf-8" />       <meta content="IE=8" http-equiv="X-UA-Compatible"/>       <title> CSS垂直居中</title>       <style type="text/css">         .container{           /*IE8與標準遊覽器垂直對齊*/         display: table-cell;         vertical-align:middle;          width:500px;/*裝飾*/         height:500px;           background:#B9D6FF;           border: 1px solid #CCC;         }         .container img{           display:block;/*讓其具備盒子模型*/         margin:0 auto;           text-align:center;         margin-top:expression((500 - this.height )/2);/*讓IE567垂直對齊 */       }       </style>     </head>     <body>       <h1>垂直居中（CSS表示式）</h1>       <div>         <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />       </div>     </body>   </html>

絕對定位法

<!doctype html> <html>   <head>     <meta charset="utf-8" />     <meta content="IE=8" http-equiv="X-UA-Compatible"/>     <title> CSS垂直居中</title>     <style type="text/css">       div {        /*IE8與標準遊覽器垂直對齊*/         display:table-cell;         vertical-align:middle;         overflow:hidden;         position:relative;         text-align:center;         width:500px;/*裝飾*/         height:500px;         border:1px solid #ccc;         background:#B9D6FF;       }       div p {         +position:absolute;         top:50%       }       img {         +position:relative;         top:-50%;         left:-50%;       }        </style>   </head>   <body>     <h1>垂直居中(絕對定位)</h1>     <div>       <p>         <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />       </p>     </div>   </body> </html>

display:inline-block法

<!doctype html> <html>   <head>     <meta charset="utf-8" />     <meta content="IE=8" http-equiv="X-UA-Compatible"/>     <title>CSS垂直居中</title>     <style type="text/css">       div {         display:table-cell;         vertical-align:middle;         text-align:center;         width:500px;         height:500px;         background:#B9D6FF;         border: 1px solid #CCC;       }       </style>     <!--[if IE]> <style type="text/css"> i {     display:inline-block;     height:100%;     vertical-align:middle     } img {     vertical-align:middle     } </style> <![endif]-->        </head>   <body>     <h1>垂直居中(inline-block法)</h1>     <div>       <i></i>       <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />     </div>   </body> </html>

writing-mode法

<!doctype html> <html>   <head>     <meta charset="utf-8" />     <meta content="IE=8" http-equiv="X-UA-Compatible"/>     <title> CSS垂直居中</title>     <style type="text/css">       div{         width:500px;         height:500px;         line-height:500px;         text-align:center;         background:#B9D6FF;         border:1px solid #f00;       }       div span{         height:100%\9;         writing-mode:tb-rl\9;       }       div img{         vertical-align:middle       }     </style>   </head>   <body>     <h1>垂直居中(writing-mode法)</h1>     <div>       <span>         <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />       </span>     </div>   </body> </html>

CSS未知高度垂直居中

這裡推薦一下我的前端學習qun：784783012，裡面都是學習前端的，如果你想製作酷炫的網頁，想學習程式設計。自己整理了一份2019最全面前端學習資料，從最基礎的HTML+CSS+JS【炫酷特效，遊戲，外掛封裝，設計模式】到移動端HTML5的專案實戰的學習資料都有整理，送給每一位前端小夥伴，有想學習web前端的，或是轉行，或是大學生，還有工作中想提升自己能力的，正在學習的小夥伴歡迎加入學習。

CSS未知高度垂直居中

相關文章