图片上下左右居中显示css

<style>
*{ margin:0; padding:0;}
.w500{ width:400px; height:400px; background:#f0f0f0; margin:60px auto; padding:50px;}
.tu300{ width:300px; height:300px; border:2px #999966 solid; margin:0 auto; text-align:center; display: table-cell; vertical-align: middle;}
.tu300 img{ max-width:300px; max-height:300px;}

</style>


<div class="w500">

     <div class="tu300"><img src="img1.jpg" /></div>

</div>