在任何屏幕上垂直居中div内的图像

Question

我有这个HTML代码：

<div id="container">   
<main>
    <div class="half"><img src="https://cdn4.iconfinder.com/data/icons/aiga-symbol-signs/441/aiga_cashier-512.png" alt="Smiley face" width="20%" style="margin-left: 50%;
margin-right: auto;  vertical-align: middle;"></div>   

    <div class="half2"></div>
    <div class="half2"></div>
</main>

这个CSS：

main {
height: calc(100%);
background: green;
}
.half {
height: 40%;
}
.half2 {
height: 30%;
}
.half2:nth-child(2) {
background: pink;
}
.half2:last-child {
background: yellow;
}

我希望在主要元素的每个子元素中垂直和水平地动态居中图像。我可以水平居中，但代码不会垂直工作。