<分区>
<分区>
*{
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="/image/VOK9C.png" alt="">
</div>我想将主div中的内部div和图片作为一个整体垂直居中。
flex-direction:column; 将 column 作为我的 flex 方向，justify-content:cneter; 水平居中主 div 中的所有内部元素。
为什么 flex 中的 align-items:center 不能将内部元素作为一个整体垂直居中？
最佳答案
justify-content:center; 中有错字。
将 center 更改为:center。
关于html - 为什么 flex 中的 `align-items:center` 不能将内部元素整体垂直居中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50672396/