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;

}