實現任意圖片垂直居中的三種方法
阿新 • • 發佈：2019-01-09
在網站開發過程中，可能會有希望圖片垂直居中的情況，而且，需要垂直居中的圖片的高度也不確定，這就會給頁面的佈局帶來一定的挑戰。我總結了一下，曾經使用過的幾種方法來使圖片垂直居中，除了第一種方法只限於標準瀏覽器外，另外兩種方法的相容性還不錯。
方法一：
將外部容器的顯示模式設定成display:table，這個設定的意思不用多說了吧… img標籤外部再巢狀一個span標籤，並設定span的顯示模式為display:table-cell，這樣span內部的內容就相當於表格，可以很方便的使用vertical-align屬性來對齊其中的內容了。
程式碼如下：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>方法1 - 未知高度的圖片垂直居中 - www.cleanthem.com</title> <style type="text/css"> body { height:100%; } #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]--> </head> <body> <div id="box"> <span><img src="images/demo_zl.png" alt="" /></span> </div> </body> </html>
方法二：
標準瀏覽器的情況還是和上面一樣，不同的是針對IE6/IE7利用在img標籤的前面插入一對空標籤的辦法。
程式碼如下：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>方法2 - 未知高度的圖片垂直居中 - www.cleanthem.com</title> <style type="text/css"> body { height:100%; } #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]--> </head> <body> <div id="box"> <i></i><img src="images/demo_zl.png" alt="" /> </div> </body> </html>
方法三：
在img標籤外包裹一個p標籤，標準瀏覽器利用p標籤的偽類屬性:before來實現居中，另外，對於IE6/IE7使用了CSS表示式來實現相容。
程式碼如下：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>方法3 - 未知高度的圖片垂直居中 - www.cleanthem.com</title> <style type="text/css"> body { height:100%; } #box{ width:500px;height:400px; text-align:center; border:1px solid #d3d3d3;background:#fff; } #box p{ width:500px;height:400px; line-height:400px; /* 行高等於高度 */ } /* 相容標準瀏覽器 */ #box p:before{ content:"."; /* 具體的值與垂直居中無關，儘可能的節省字元 */ margin-left:-5px; font-size:10px; /* 修復居中的小BUG */ visibility:hidden; /*設定成隱藏元素*/ } #box p img{ *margin-top:expression((400 - this.height )/2); /* CSS表示式用來相容IE6/IE7 */ vertical-align:middle; border:1px solid #ccc; } </style> </head> <body> <div id="box"> <p><img src="images/demo_zl.png" alt="" /></p> </div> </body> </html>
長按圖片識別圖中二維碼(或搜尋微信公眾號FrontEndStory)關注“前端那些事兒”，帶你瞭解最新的前端技術。
