How we place a span or div in exact middle of another div

HTML part

<div class="parent_box">

<span class="child_box">

    <img src="dump_images/image.png"/>

    </span>

</div>

CSS Part

<style>

.parent_box { display:table; background-color:#333333; width:300px; height:300px; border:1px solid #000000; text-align:center;}

.child_box { display:table-cell; background-color:#CC6600; width:200px; height:200px; display:table-cell; vertical-align:middle; font-family:Arial, Helvetica, sans-serif; color:#FF9900; font-size:15px;}

</style>