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

我有以下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>

---

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

居中有用指南：居中有用指南：

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