CSS怎么解決頁面圖片水平垂直居中問題

這篇文章主要介紹“CSS怎么解決頁面圖片水平垂直居中問題”，在日常操作中，相信很多人在CSS怎么解決頁面圖片水平垂直居中問題問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS怎么解決頁面圖片水平垂直居中問題”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

做為一個前端設計人員，對于產品展示頁面的設計一定不會陌生，其中產品圖片擺放是必定經歷的一步，并且水平居中和垂直居中又是最多的。有時需要產品圖片水平垂直居中顯示，這種展示用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是多少，此時解決圖片水平居垂直居中就相當的困難。換過來說，如果有什么辦法能讓不同尺寸的圖片實現水平垂直居中，那對于我們來說是多么有用的，又是多么方便的一件事。

解決問題&mdash;&mdash;讓圖片水平垂直居中

解決水平居中是相當的容易，如果圖片左浮動并且"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復制內容到剪貼板

1. <ul class="imgWrap clearfix">  

2.  <li><a href="#" class="imgBox"><span></span><img src="images/img1.jpg" alt="" /></a></li>  

3.  <li><a href="#" class="imgBox"><span></span><img src="images/img2.jpg" alt="" /></a></li>  

4.  <li><a href="#" class="imgBox"><span></span><img src="images/img3.jpg" alt="" /></a></li>  

5.  <li><a href="#" class="imgBox"><span></span><img src="images/img4.jpg" alt="" /></a></li>  

6. </ul>  

  
CSS Code

CSS Code復制內容到剪貼板

1. <style type="text/css">   

2.  .imgWrap li {   

3.   float: left;   

4.   border: solid 1px #666;   

5.   margin: 10px 10px 0 0;   

6.   list-style: none;   

7.   border-collapse: collapse;    

8.  }   

9.  .imgWrap a {   

10.   background: #ffa url(images/gridBg.gif) repeat center;   

11.   width: 219px;   

12.   height: 219px;   

13.   display: table-cell;/*圖片容器以表格的單元格形式顯示*/  

14.   text-align: center; /* 實現水平居中 */  

15.   vertical-align: middle; /*實現垂直居中*/        

16.  }   

17.  .imgWrap a:hover {   

18.   background-color: #dfd;   

19.  }   

20.  .imgWrap img {   

21.   border: solid 1px #66f;   

22.   vertical-align: middle; /*圖片垂直居中*/  

23.  }   

24.  </style>   

25.  <!--下面是解決IE6-7的正常顯示的代碼-->   

26.  <!--[if lt IE 8]>   

27.   <style type="text/css">   

28.   .imgWrap a {   

29.    display: block;   

30.   }   

31.   .imgWrap span {   

32.    display: inline-block;   

33.    vertical-align: middle;   

34.    height: 100%;   

35.   }   

36.   .imgWrap {   

37.    _height: 0;   

38.    zoom: 1;   

39.   }   

40.   </style>   

41.  <![endif]-->  

  
效果

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

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

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

1. <ul class="imgWrap clearfix">  

2.  <li><a href="#" class="imgBox"><span></span><img src="images/img1.jpg" alt="" /></a></li>  

3.  <li><a href="#" class="imgBox"><span></span><img src="images/img2.jpg" alt="" /></a></li>  

4.  <li><a href="#" class="imgBox"><span></span><img src="images/img3.jpg" alt="" /></a></li>  

5.  <li><a href="#" class="imgBox"><span></span><img src="images/img4.jpg" alt="" /></a></li>  

6. </ul>  

  
CSS Code

CSS Code復制內容到剪貼板

1. <style type="text/css">   

2.  .imgWrap li{    

3.   width: 219px;   

4.   height: 219px;   

5.   float: left;   

6.   border: solid 1px #666;   

7.   margin: 10px 10px 0 0;   

8.   list-style: none;   

9.   text-align: center;   

10.   font-size: 0;   

11.  }   

12.   

13.  .imgWrap a {   

14.   display: block;   

15.   height: 100%;   

16.   background: #ffa url(images/gridBg.gif) repeat center;   

17.  }   

18.  .imgWrap a:hover {   

19.   background-color: green;   

20.  }   

21.  .imgWrap span {   

22.   display: inline-block;/*將行內元素改變為行內塊元素顯示*/  

23.   width: 1px;/*實現ＩＥ下可讀效果*/  

24.   height: 100%;/*使用元素高度和圖片容器高度一樣*/  

25.   vertical-align: middle;/*垂直對齊*/  

26.  }   

27.   

28.  .imgWrap img {   

29.   vertical-align: middle;   

30.  }   

31. </style>  

  
效果

3、display:table模擬表格實現圖片垂直居中

接下來要說的這種方法是結構有點復雜，而且在IE6-7事要配合hack來產現。這個方法就是模擬表格的形式來實現圖片垂直居中的效果。

表格大家都知道，他有行（table-row）單元格（table-cell），眾所周知，表格單元格中“vertical-align: middle”能讓元素垂直居中，那么下面這個實例就是利用這種原理來制作的，一起來看代碼

HTML Markup

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

1. <ul class="imgWrap clearfix">  

2.    <li>  

3.     <div class="table">  

4.      <div class="tableCell">  

5.       <a href="#" class="imgBox"><img src="images/img1.jpg" alt="" /></a>  

6.      </div>  

7.     </div>    

8.    </li>  

9.    <li>  

10.     <div class="table">  

11.      <div class="tableCell">  

12.       <a href="#" class="imgBox"><img src="images/img2.jpg" alt="" /></a>  

13.      </div>  

14.     </div>    

15.    </li>  

16.    <li>  

17.     <div class="table">  

18.      <div class="tableCell">  

19.       <a href="#" class="imgBox"><img src="images/img3.jpg" alt="" /></a>  

20.      </div>  

21.     </div>    

22.    </li>  

23.    <li>  

24.     <div class="table">  

25.      <div class="tableCell">  

26.       <a href="#" class="imgBox"><img src="images/img4.jpg" alt="" /></a>  

27.      </div>  

28.     </div>    

29.    </li>  

30.   </ul>   

  
CSS Code

CSS Code復制內容到剪貼板

1. .imgWrap li {   

2.  background: #ffa url(images/gridBg.gif) repeat center;   

3.  width: 219px;   

4.  height: 219px;   

5.  float: left;   

6.  border: solid 1px #666;   

7.  margin: 10px 10px 0 0;   

8.  list-style: none;   

9.  text-align: center;   

10. }   

11. .table {   

12.  width: 100%;   

13.  height: 100%;   

14.  display: table;   

15.  position: relative;   

16. }     

17.   

18. .tableCell {       

19.  display: table-cell;   

20.  vertical-align: middle;   

21.  text-align: center;      

22.  padding: 10px;   

23.  *position: absolute;   

24.  *top: 50%;   

25.  *left: 50%;   

26. }   

27. .imgWrap a {   

28.  display: block;   

29.  *position:relative;   

30.  *top: -50%;   

31.  *left: -50%;   

32. }  

  
效果

到此，關于“CSS怎么解決頁面圖片水平垂直居中問題”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！