使用display:flex垂直对齐元素时如何将h1置于段落上方

你当前section容器的Flex布局默认主轴为水平方向，所有直接子元素（h1、p、img）会横向排列，仅需将Flex主轴方向改为纵向，即可实现标题在段落上方、三者按书写顺序从上到下排列的效果，同时保留原有整体垂直+水平居中的特性。

该方案无需修改现有HTML结构，仅需在section的CSS样式中新增一行属性即可：

section{
      height: 100vh;
      display: flex;
      /* 新增下行配置，切换主轴为垂直方向 */
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: white;
      scroll-snap-align: start;
  }

.one{
      text-align: center;
  }

原理解释 #

• Flex布局默认flex-direction: row，主轴为水平方向，子元素横向排布
• 改为flex-direction: column后，主轴切换为垂直方向，子元素会按照DOM节点的书写顺序从上到下依次排列
• 原有justify-content: center和align-items: center配置在修改主轴方向后，依然可以保证所有内容整体在section容器内垂直+水平居中，无需额外调整

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