只用CSS實現容器內圖片上下左右居中

傑克.陳發表於2014-01-04
CSS

原文 只用CSS實現容器內圖片上下左右居中

 一直以來，大家都知道，DIV容器內設定 text-align:center 即可讓圖片居中，但是DIV內預設的圖片是上對齊，不會上下居中，如果想要實現這樣的效果，JS判斷是比較麻煩的，因為DIV容器內的圖片高度是不一定的，那麼只有用table了，我想大多數人事不願意這麼做的，那麼怎麼辦呢，還是用CSS控制下吧
     其實早就在找這樣的程式碼，今天終於自己試著寫了一份出來，屌絲們可以自己分析下原理，其實很簡單
     如果你之前也不會，那麼希望對你有所幫助

複製程式碼
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>純css實現div容器內圖片上下左右居中效果-柯樂義</title>
 6 <style type="text/css">
 7 *{ margin:0; padding:0; list-style:none;}
 8 img{ border:none;}
 9 
10 .main{ width:600px; height:400px; margin:100px auto;text-align:center;vertical-align:middle;display:block;position:relative; background:#ddd;}
11 .main a{display:table-cell;vertical-align:middle;width:600px; height:400px; }
12 .main a img{max-width:600px;max-height:400px; }
13 </style>
14 </head>
15 
16 <body>
17 <div class="main">
18 <a href="http://keleyi.com/a/bjac/wynnj5xc.htm" target="_blank"><img src="http://keleyi.com/keleyi/phtml/picnext/images/k06.jpg" alt="柯樂義" /></a>
19 </div>
20 </body>
21 </html>
複製程式碼

 

相容IE8，火狐，Chrome，Opera等瀏覽器

http://www.cnblogs.com/sosoft/

原文和效果： http://keleyi.com/a/bjad/fc6fwm34.htm


相關文章