css怎么让图片垂直左右居中?(外层div是浮动且按照百分比排列)-CSDN博客

一、原始的居中方法是把div换成table
<div style="width: 500px; height: 200px; border: solid 1px red; text-align: center">
 
      
  < 
  img  
  src 
  = 
  "http://www.baidu.com/img/baidu_jgylogo3.gif"  
  /> 
 
 
  </ 
  div 
  >  
 
 
  < 
  div  
  style 
  = 
  "width: 500px; height: 200px; border: solid 1px red;" 
  > 
 
 
      
  < 
  center 
  > 
 
 
         
  < 
  img  
  src 
  = 
  "http://www.baidu.com/img/baidu_jgylogo3.gif"  
  /> 
 
 
      
  </ 
  center 
  > 
 
 
  </ 
  div 
  > 
 
 
  < 
  table  
  style 
  = 
  "width: 500px; height: 200px; border: solid 1px red; text-align:center" 
  > 
 
 
     
  < 
  tr 
  > 
 
 
         
  < 
  td 
  > 
 
 
         
  < 
  img  
  src 
  = 
  "http://www.baidu.com/img/baidu_jgylogo3.gif"  
  /> 
 
 
         
  </ 
  td 
  > 
 
 
     
  </ 
  tr 
  > 
 
 
  </ 
  table 
  > 
 

     
 
 
  二、但是如果外层div是浮动且按照百分比排列的话，你要怎么做？ 
 
 
  此时，请看图下的关键代码，可实现不同分辨率下的图片垂直左右居中。 
 
<!doctype html>
 
  < 
  html 
  > 
 
 
  < 
  head 
  > 
 
 
  < 
  meta  
  charset 
  = 
  "utf-8" 
  > 
 
 
  < 
  title 
  >图片垂直水平居中</ 
  title 
  > 
 
 
  < 
  style 
  > 
 
 
  div{height:500px;width:400px;text-align:center;border:1px solid #000;margin:20px auto;} 
 
 
  img{vertical-align:middle;}  /* 关键代码 */ 
 
 
  span{height:100%;display:inline-block;vertical-align:middle;} /* 关键代码 */ 
 
 
  </ 
  style 
  > 
 
 
  </ 
  head 
  > 
 

     
 
 
  < 
  body 
  > 
 
 
       
  < 
  div 
  > 
 
 
           
  < 
  img  
  src 
  = 
  "http://img.o571.com/fc/ad/20130827161606949.jpg"  
  width 
  = 
  "323"  
  height 
  = 
  "215"  
  /> 
 
 
           
  < 
  span 
  ></ 
  span 
  > 
 
 
       
  </ 
  div 
  > 
 
 
  </ 
  body 
  > 
 
 
  </ 
  html 
  > 
 