1-1-7.让图片居中

<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>

最简单的居中text-align: center。

使用center标签也可设置居中。

有时候做居中也会用到margin: 0px auto。

div下做到了水平居中，垂直比较困难。放到table里面，可以水平居中，垂直居中。

<div style="width: 500px; height: 200px; border: solid 1px red; display:table-cell; vertical-align:middle;text-align:center">
  <img src="http://www.baidu.com/img/baidu_jgylogo3.gif" />
</div>

#qq {
width: 340px;
height: 250px;
background: url(images/bg.png);
position: absolute;
top: 50%;
left: 50%;
//结合absolute,margin设置宽高一般
margin-top: -125px;
margin-left: -170px;
}