如何在div中垂直和水平居中图像

Question

我正在努力将图像置于div中。

这是我到目前为止所做的：

<div class="header-item">
    <div style="background-color: gray;" id="tod-header">
        <div>
            <div style="float: left;" id="tod-title">
                <img style="max-width: 400px; height: 134px;" 
                  src="http://i.imgur.com/rJBx6.jpg" alt="A Random Image" />
            </div>
            <div style="float: left; min-height: 134px; padding-left: 50px;">
                <!-- Poor man's separator between columns -->
            </div>
            <div style="float: left; min-height: 134px;">
                <!-- I want to place two divs here..
                 each div will have an image that will be
                 vertically and horizontally centered in the div 
                 -->
                 <div id="callout_1" style="min-height: 134px; float: left;">              
                     <img src="http://i.imgur.com/8J4sS.jpg" width=100px />
                 </div>

                 <div id="callout_2" style="min-height: 134px; float: left;" >    
                    <img src="http://i.imgur.com/LtdCR.jpg" width=200px />
                 </div>

            </div>

            <!-- This is a hack to allow gray background to fill header -->
            <div style="min-height: 134px;">
            </div>
        </div>
    </div>
</div>

Here is the jsfiddle link

如何让右侧的两幅图像在各自的div中垂直和水平居中？