css中怎么将div居中显示图片

<style type="text/css">

 div{

  width:180px;

  height:180px;

  border:1px solid #000;

  position:relative;

  display:table-cell;

  text-align:center;

  vertical-align:middle;

 }

 div p{

  position:static;

  +position:absolute;

  top:50%;

 }

 div img{

  position:static;

  +position:relative;

  top:-50%;

  left:-50%;

 }

 </style>

<div><p><img src="0225/12986229678396.jpg" width="120" height="120"></p></div><br>

<div><p><img src="0225/12986229678396.jpg" width="160" height="160"></p></div>

<div>

<img src="images/tt.gif" width="150" height="100" />

</div>

css样式如下：

div {

width:300px;

height:150px;

background-color:#ccc;

border:#000 1px solid;

text-align:center;

padding-top:50px;

}