CSS未知高度垂直居中的實現

2024-07-11 08:59:37

字體：大中小

來源：轉載

供稿：網友

本文主要介紹了CSS未知高度垂直居中的實現，分享給大家，具體如下：

<!doctype html><html lang="en">    <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 class='container'>        <table width="100%" height="100%">            <tr>               <td align="center" 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早些年搞了大堆的私有屬性，這也有待我們深一步挖掘。我們先看最簡單的實現，背景圖片法

背景圖片法

<!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 class="container">    </div></body></html>

CSS表達式法

<html lang="en">    <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 class="container">        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />      </div>    </body>  </html>

絕對定位法

<!doctype html><html lang="en">  <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 class="container">      <p>        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />      </p>    </div>  </body></html>

display:inline-block法

<!doctype html><html lang="en">  <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 class="container">      <i></i>      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />    </div>  </body></html>

writing-mode法

<!doctype html><html lang="en">  <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 class="container">      <span>        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />      </span>    </div>  </body></html>