align-items:center無(wú)法將items作為一個(gè)整體垂直居中？

<div id="main">
    <div id="inner">inner box</div>
    <img src="image.png" alt="">
</div>

css

*{
margin:0;
padding:0;
}

#main{
    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;
}

   
#inner{
    margin:10px auto;
    width:300px;
    height:40px;
    line-height:40px;
    border:1px solid red;
    z-index:10;
}

img{
    width:256px;
    height:256px;
}

效果

為何inner div和img 不能作為一個(gè)整體，垂直方向居中？（他們水平居中了）。