How do I center an image inside a div given my code situation?

How do I center an image inside a div given my code situation?

<div class="box">
<div class="pic">
<img src="/images/img.png" class="img_pic" />
</div>
</div>
.box {
border: 1px solid #333;
cursor: pointer;
height: 73px;
margin: 40px 42px 0 0;
width: 269px;
}
.img_pic {
display: block;
margin-left: auto;
margin-right: auto;
}
I want the image ("img_pic") to be centered vertically as well. With what
I have I can do it horizontally but not vertically. I tried
vertical-align: middle; but that didn't work and I tried line-height: 73px
since the height of the box is 73px. I can't seem to figure a way out of
this.
How can I center the image vertically while still retaining the horizontal
centering?