时间戳

首页 > 解决方案 > 为什么 flex 中的 `align-items:center` 不能将内部元素作为一个整体垂直居中？

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

问题描述

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

我想将主 div 中的内部 div 和图像作为一个整体垂直居中。
flex-direction:column; 使列作为我的 flex 方向，justify-content:cneter;水平居中主 div 中的所有内部元素。
为什么align-items:center在 flex 中不能将内部元素作为一个整体垂直居中？

标签： htmlcssflexbox

解决方案

中有一个错字justify-content:cneter;。更改cneter为：center。

推荐阅读