<div id="main">
<div id="inner">inner box</div>
<img src="image.png" alt="">
</div>
css
*{
margin:0;
padding:0;
}
-sharpmain{
margin:0 auto;
width:600px;
height:392px;
border:1px solid red;
text-align:center;
position:relative;
display:flex;
align-items:center;
flex-direction:column;
justify-content:cneter;
}
-sharpinner{
margin:10px auto;
width:300px;
height:40px;
line-height:40px;
border:1px solid red;
z-index:10;
}
img{
width:256px;
height:256px;
}
effect
Why can"t inner div and img be centered vertically as a whole? They are in the middle of the level.