使用Flexbox实现图片Div居中且底部区域固定的布局问题

要让图片容器居中显示，同时把底部栏固定在容器底部，调整Flex布局属性就能实现，关键是用margin-top: auto把底部栏推到底部，同时让图片自动居中。

修改后的CSS代码：

.box {
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center; /* 让所有子元素水平居中 */
}

.image {
  width: 100%;
  height: 40%;
  margin: auto 0; /* 垂直方向自动分配空间，实现居中 */
}

.bot-section {
  width: 100%;
  margin-top: auto; /* 把底部栏挤到容器底部 */
}

修正后的HTML（原代码存在标签错误，将</p>改为</div>）：

<div class="box">
 <div class="image"></div>
 <div class="bot-section">
    <div class="text"></div>
    <div class="progress"></div>
 </div>
</div>

调整说明 #

• 给.box设置align-items: center，统一让所有子元素水平居中，比单独给.image加align-self: center更简洁高效。
• .image的margin: auto 0会在垂直方向自动填充上下空白，自然实现垂直居中。
• .bot-section的margin-top: auto会占据上方所有剩余空间，直接将自身固定在容器底部。

你之前用justify-content: center会让所有子元素整体垂直居中，而align-self: flex-end在垂直方向不起作用（因为flex-direction: column时，align-self控制的是水平位置），所以达不到预期效果。

内容的提问来源于stack exchange，提问作者quaka