html/css 图片在div内居中。

之前想让图片在框内居中经常用table，后来用vertical-align: middle;发现挺好用的，看来要好好了解css的每个属性，打好基础跟关键。

1. table布局居中就比较麻烦

<table>
  <tr>
     <td>
        <img src="1.jpg">
     </td>
  </tr>
</table>

css:

table{

width:200px;

heightL200px;

}

table td{

width:200px;

heightL200px;

}

table td img{

max-width:200px;

max-heightL200px;

}

在table里面个图片设置最大宽高，这样图片就会在表格内自适应比例，并且可居中。

2.第二种方法html就比较简洁

<div class="box">
   <a href="#">
       <img src="1.jpg">
   </a>
</div>

css:

.box{

width:300px;

height:300px;

border:1px solid #000;

}

.box a{

width:300px;

height:300px;

display: table-cell;

text-align: center;

vertical-align: middle;

}

.box a img{

vertical-align: middle;

max-width:300px;

max-height:300px;

}