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

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

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

大家都知道，如果其中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中無法正常運。這樣一來是不是將無法實現呢？大家別急，我們一起來看下面的幾種方法：