CSS如何实现未知高度图像的垂直居中（附代码）

互联网 18-11-12

本篇文章给大家带来的内容是关于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早些年搞了大堆的私有属性，这也有待我们深一步挖掘。我们先看最简单的实现，背景图片法

背景图片法

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