我有这个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;
}
我希望在主要元素的每个子元素中垂直和水平地动态居中图像。我可以水平居中,但代码不会垂直工作。