如何用Flexbox调整居中Div：无需Margin/Padding下移并预留顶部空间

解决方案：利用Flex弹性空间分配 #

完全依靠Flexbox特性实现，无需给任何元素添加margin或padding：

步骤1：调整HTML结构 #

在<main>内新增一个占位元素和一个卡片包裹容器，让main成为垂直方向的Flex布局载体：

<main>
    <!-- 上方占位元素，自动占满剩余垂直空间 -->
    <div class="top-spacer"></div>
    <!-- 包裹三个div，保持水平排列 -->
    <div class="cards-container">
        <div class="who">...</div>
        <div class="what">...</div>
        <div class="where">...</div>
    </div>
</main>

步骤2：修改CSS代码 #

1. 调整<main>的Flex方向为垂直，取消垂直居中，让子元素从上到下排列：

main{
    display: flex;
    height:calc(100vh - 100px);
    flex-direction: column; /* 改为垂直方向 */
    justify-content: flex-start; /* 子元素从顶部开始排列 */
}

2. 给占位元素设置flex-grow:1，让它自动占据<main>内所有可用垂直空间，把下方的卡片容器挤到目标位置：

.top-spacer {
    flex-grow: 1;
}

3. 给卡片包裹容器设置Flex属性，保持三个div水平均匀分布，和原布局效果一致：

.cards-container {
    display: flex;
    justify-content: space-around; /* 和原main的水平分布逻辑一致 */
    width: 100%; /* 占满main的宽度 */
}

原理说明 #

• flex-grow:1的占位元素会优先占据<main>内除卡片容器外的所有垂直空间，自然在上方留出空白区域用于添加图片；
• 卡片容器保持原有的水平排列逻辑，整体被推到下方，完全不需要依赖margin或padding调整位置。

内容的提问来源于stack exchange，提问作者2k adc