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

时间:2017-09-04 15:13:54

标签: html5 css3

我有这个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;
}

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

0 个答案:

没有答案