*{
margin:0;
padding:0;
}
#main{
margin:0 auto;
width:300px;
height:180px;
border:1px solid red;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
#inner{
width:100px;
height:40px;
line-height:40px;
border:1px solid red;
text-align:center;
margin-bottom:10px;
}

<div id="main">
<div id="inner">inner box</div>
<img src="https://i.stack.imgur.com/VOK9C.png" alt="">
</div>
&#13;
我想将整个div中的内部div和图像垂直居中
flex-direction:column;
将列作为我的弹性方向,justify-content:cneter;
水平居中主div中的所有内部元素
为什么flex中的align-items:center
不能将内部元素作为一个整体垂直居中?
答案 0 :(得分:1)
justify-content:cneter;
中有拼写错误。
将cneter
更改为:center
。