Question

＆＃13;

*{
    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;
}

＆＃13;

<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不能将内部元素作为一个整体垂直居中？

Answer 1

justify-content:cneter;中有拼写错误。将cneter更改为：center。

为什么在flex中`align-items：center`不能将内部元素作为一个整体垂直居中？

1 个答案: