CSS解決頁面圖片水平垂直居中問題的方法

DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS解決頁面圖片水平垂直居中問題的方法

編輯：CSS詳解

這篇文章主要介紹了CSS解決頁面圖片水平垂直居中問題的方法,文中給出了三種方案而無需依賴JavaScript,需要的朋友可以參考下

做為一個前端設計人員，對於產品展示頁面的設計一定不會陌生，其中產品圖片擺放是必定經歷的一步，並且水平居中和垂直居中又是最多的。有時需要產品圖片水平垂直居中顯示，這種展示用CSS來實現又是比較棘手的一件事，我想很多前端攻程師都有研究過或者說是搜索過這些方法吧。很多網站都是使用table來實現產品圖片垂直居中，實現也是相當的方便，唯一不足之處就是結構繁鎖，那麼今天和大家一起看幾種不是使用talbe方法實現產品圖片水平垂直居中的方法。

圖片水平垂直居中存在的問題

所謂的圖片水平垂直居中就是把圖片放在一個容器元素中（容器大於圖片尺寸或是指定了大小的容器），並且圖片位居此容器正中間（中間是指元素容器的正中間），而圖片不是以背景圖片（background-image）形式展示，是以<img>元素形式展示的。如下圖所示：
2016310113055157.png (149×73)

大家都知道，如果其中img有明確的尺寸，並且圖片尺寸都是一致的，要實現其水平垂直居中一件非常容易的事情，我們只要像下面操作就能方便解決問題：

將圖片以塊元素方式顯示(display:block)；
給圖片指定明確的margin-left和margin-top值，而其中margin-left值等於圖片所在容器的寬度(imbBoxWidth)減去圖片本身寬度(imgWidth)的值的一半【margin-left=(imgBoxWidth-imgWidth)/2】;margin-top值和margin-left很類似，只是把相對應的寬度值換成高度值,即【margin-top=(imgBoxHeight-imgHeight)/2】。
上面的方法是方便簡單，但受限太大，比如說圖片不一樣時，用上面的方法實現就比較難，或許你會說給相圖尺寸的圖片定義一個類，然後在給他們指定不同的margin。但有很多情況下我們是無法使用這種方法來解決圖片水平垂直居中的問題，比如說有很多不同尺寸的圖片，而且圖片容器的單位和圖片大小單位不一致時，這樣我們就沒有辦法能計算出圖片與容器之間的margin是多少，此時解決圖片水平居垂直居中就相當的困難。換過來說，如果有什麼辦法能讓不同尺寸的圖片實現水平垂直居中，那對於我們來說是多麼有用的，又是多麼方便的一件事。

解決問題——讓圖片水平垂直居中

解決水平居中是相當的容易，如果圖片左浮動並且"display:inline"時，我們只要給圖片設置一個"text-align:center"屬性，就順利解決了水平居中。

對於垂直居中的最佳解決方案，在現代浏覽器中，我們可以給圖片容器設置“dipslay:table-cell;vertical-align:middle”, 這種方法能順利的讓圖片實現垂直居中，但只能在現代浏覽器運行，在IE6-7中無法正常運。這樣一來是不是將無法實現呢？大家別急，我們一起來看下面的幾種方法：

1、table-cell加上display:inline

這種方法很神奇，前面我們說過用display-table和vertical-middle是在現代浏覽器中實現圖片垂直居中是最佳辦法，只是IE6-7不支持display:table-cell，其實並不是那麼嚴重，我們只要在IE6-7下給他來個另外的寫法。其實掌握了原理在IE下實現起來也並不難，下面我們一起先來看看這個思路：

首先在圖片的容器元素中設置“display:table-cell;vertical-align:middle;”實現現浏覽器的垂直居中；
IE6-7有一個好的辦法，就是創建一個線盒，此線盒的高度和圖片容器的高度一樣，並且給這個線盒也設置“vertical-align:middle”。
接下來的關鍵是給IE6-7創建線盒，還好IE6-7下部分顯示支持“dipslay:inline-block”。這樣我們就可以在圖片的容器中創建一個空元素（比如說span），並且設置span的“display:inline-block;height:100%;vertical-align:middle”。

創建線盒中有一個細節需要注意，在IE6-7中空的line-block元素寬度為“0”，這樣在IE6-7下是沒有效果的，此時我們需要給span加上“width:1px”，此時會給水平居中造成1px的誤差，但這種bug你是可以接受得了的。

那麼最終解決方案就是使用display:table-cell和設置了display:inline-block的線合span。當然其中還是需要為IE寫一點特殊的代碼，接下來我們的起來看代碼：

Html Markup

XML/Html Code復制內容到剪貼板

<ul class="imgWrap clearfix">
<li><a href="#" class="imgBox"><span></span><img src="images/img1.jpg" alt="" /></a></li>
<li><a href="#" class="imgBox"><span></span><img src="images/img2.jpg" alt="" /></a></li>
<li><a href="#" class="imgBox"><span></span><img src="images/img3.jpg" alt="" /></a></li>
<li><a href="#" class="imgBox"><span></span><img src="images/img4.jpg" alt="" /></a></li>
</ul>

CSS Code

CSS Code復制內容到剪貼板

<style type="text/CSS">
.imgWrap li {
float: left;
border: solid 1px #666;
margin: 10px 10px 0 0;
list-style: none;
border-collapse: collapse;
}
.imgWrap a {
background: #ffa url(images/gridBg.gif) repeat center;
width: 219px;
height: 219px;
display: table-cell;/*圖片容器以表格的單元格形式顯示*/
text-align: center; /* 實現水平居中 */
vertical-align: middle; /*實現垂直居中*/
}
.imgWrap a:hover {
background-color: #dfd;
}
.imgWrap img {
border: solid 1px #66f;
vertical-align: middle; /*圖片垂直居中*/
}
</style>
<!--[if lt IE 8]>
<style type="text/CSS">
.imgWrap a {
display: block;
}
.imgWrap span {
display: inline-block;
vertical-align: middle;
height: 100%;
}
.imgWrap {
_height: 0;
zoom: 1;
}
</style>
<![endif]-->

效果
2016310113218344.png (300×73)

2、空白標簽實現圖片的垂直居中

這種方法很有意思，也很有獨特之處，兼容各浏覽器，代碼較第一種方法又簡單很多，最主要的不要單獨給IE寫效果，而且易懂，下面一起看看這種方法吧。
Html Markup

XML/Html Code復制內容到剪貼板

<ul class="imgWrap clearfix">
<li><a href="#" class="imgBox"><span></span><img src="images/img1.jpg" alt="" /></a></li>
<li><a href="#" class="imgBox"><span></span><img src="images/img2.jpg" alt="" /></a></li>
<li><a href="#" class="imgBox"><span></span><img src="images/img3.jpg" alt="" /></a></li>
<li><a href="#" class="imgBox"><span></span><img src="images/img4.jpg" alt="" /></a></li>
</ul>

CSS Code

CSS Code復制內容到剪貼板