使用Flexbox定位标题：将<h2>Locations</h2>置于中间.address div上方

我看了你的代码仓库结构，要把<h2>Locations</h2>放到中间的.address div上方并让标题居中，咱们可以通过调整布局结构和CSS来实现，具体步骤如下：

1. 确认HTML结构层级 #

首先确保你的Locations部分的HTML结构是把<h2>和.address放在同一个父容器下，比如：

<section class="locations-section">
  <h2>Locations</h2>
  <div class="address">
    <!-- 这里是各个地址卡片的内容 -->
  </div>
</section>

这样咱们可以通过父容器的布局控制两个元素的排列顺序和位置。

2. 用Flex布局调整排列与居中 #

给父容器添加Flex布局，让子元素垂直排列（标题在上，地址容器在下），同时让所有子元素水平居中：

.locations-section {
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  align-items: center; /* 让子元素在水平方向居中 */
  padding: 20px 0; /* 可选：添加上下内边距，让内容更美观 */
}

3. 优化标题样式（可选） #

如果需要给标题和地址容器之间增加间距，或者调整标题的样式，可以单独给<h2>设置：

.locations-section h2 {
  margin-bottom: 20px; /* 给标题和地址容器之间添加间距 */
  /* 因为你已经在html选择器里设置了全局text-align: center，所以标题文字会自动居中，不需要额外设置 */
}

排查可能的干扰因素 #

如果做完上面的调整标题还是没居中，检查这几点：

• 有没有给<h2>设置过float: left？如果有，去掉这个属性
• 父容器有没有被其他CSS规则覆盖了text-align或者Flex属性？可以用浏览器开发者工具检查元素的样式
• .address容器有没有设置了width: 100%导致挤压标题？确保父容器的宽度是合适的

这样调整后，<h2>Locations</h2>就会稳稳地放在.address容器的上方，并且文字居中显示啦。

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