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