html下图片居中

1. 水平居中

   <div style="text-align:center">
           <img src="http://www.baidu.com/img/bd_logo1.png">
   </div>

2.  

   <div >
      <img style="margin:0 auto;display:block;" src="http://www.baidu.com/img/bd_logo1.png" >
   </div>

3. 垂直居中

    <table cellpadding="0" cellspacing="0" border="1" width="100%" height="400px">
     <tr>
       <td align="center" valign="middle" >
            <img src="http://www.baidu.com/img/bd_logo1.png" style="border:1px solid #ccc;" />
       </td>
     </tr>
   </table>

    
4. 
   

    <div style="height:400px;border:1px solid #ccc;display:table;">
       <div style="display:table-cell;vertical-align:middle">
       <img src="http://www.baidu.com/img/bd_logo1.png" style="border:1px solid #ccc;" />
       </div>
   </div>

    

5.  

   <div style="height:400px;border:1px solid #ccc;text-align:center;">
   <img style="max-height:100%;max-width:100%;border:1px solid #ccc;vertical-align:middle;" src="http://www.baidu.com/img/bd_logo1.png">
   <span style="height:100%;vertical-align:middle;display:inline-block;"></span>
   </div>