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

来源：易妖游戏网

本篇文章给大家带来的内容是关于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-rl9;
 }
 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>