Css未知高度圖片垂直置中執行個體

方法一：

該方法是將外部容器的顯示模式設定成display:table，img標籤外部再嵌套一個span標籤，並設定span的顯示模式為display:table-cell，這樣就可以很方便的使用vertical-align象表格元素那樣對齊了，當然這隻是在標準瀏覽器下，IE6/IE7還得使用定位。
HTML結構部分：

代碼如下	複製代碼
<div id="box">     &nbsp;&nbsp;&nbsp;&nbsp;<span><img src="images/demo.jpg" alt="" /></span> </div>

CSS樣式部分：

代碼如下

複製代碼

<style type="text/css"> #box {     width:500px;height:400px;     display:table;     text-align:center;     border:1px solid #d3d3d3;background:#fff; } #box span {     display:table-cell;     vertical-align:middle; } #box img {     border:1px solid #ccc; } </style> <!--[if lte IE 7]> <style type="text/css"> #box {     position:relative;     overflow:hidden; } #box span {     position:absolute;     left:50%;top:50%; } #box img {     position:relative;     left:-50%;top:-50%; } </style> <![endif]-->

方法二：
標準瀏覽器還是將外部容器#box的顯示模式設定為display:table-cell，IE6/IE7是利用在img標籤的前面插入一對空標籤的辦法。
HTML結構部分：

代碼如下

複製代碼

<div id="box">     &nbsp;&nbsp;&nbsp;&nbsp;<i></i><img src="images/demo.jpg" alt="" /> </div> <style type="text/css"> #box{     width:500px;height:400px;     display:table-cell;     text-align:center;     vertical-align:middle;     border:1px solid #d3d3d3;background:#fff; } #box img {     border:1px solid #ccc; } </style> <!--[if IE]> <style type="text/css"> #box i {     display:inline-block;     height:100%;     vertical-align:middle } #box img {     vertical-align:middle } </style> <![endif]-->

方法三：
該方法針對IE6/IE7，將圖片外部容器的字型大小設定成高度的0.873倍就可以實現置中，標準瀏覽器還是使用上面的方法來實現相容，並且結構也是比較優雅。
HTML結構部分：

代碼如下	複製代碼
<div id="box">     &nbsp;&nbsp;&nbsp;&nbsp;<img src="images/demo.jpg" alt="" /> </div>

CSS樣式部分：

代碼如下	複製代碼
#box {     width:500px;height:400px;     text-align:center;     border:1px solid #d3d3d3;background:#fff;       /* 相容標準瀏覽器 */     display: table-cell;     vertical-align:middle;       /* 相容IE6/IE7 */     *display:block;     *font-size:349px; /* 字型大小約為容器高度的0.873倍 400*0.873 = 349 */     *font-family:Arial; /* 防止非utf-8引起的hack失效問題，如gbk編碼 */ }   #box img {     vertical-align:middle; }