如何用CSS实现Quick Jump下层级链接居中垂直堆叠？

只需修改.quickwordtrip的CSS属性，调整Flex布局的方向与对齐逻辑就能实现需求：

修改后的CSS代码 #

.quickwordtrip {
  display: flex;
  flex-direction: column; /* 切换为垂直方向排列 */
  align-items: center;    /* 让链接在容器内水平居中 */
  width: 100%;
  gap: 8px; /* 可选：给链接间添加垂直间距，优化视觉体验 */
}

关键属性说明 #

• flex-direction: column：将默认的横向Flex布局改为垂直方向，让链接从上到下堆叠排列。
• align-items: center：确保每个链接在容器中水平居中对齐。
• 可选的gap属性：控制链接之间的垂直间距，避免内容过于紧凑。

原HTML结构无需改动 #

<div class="quickwordtrip">
  <a href="#level1">Levels 1 - 500</a>
  <a href="#level501">Levels 501 - 1000</a>
  <a href="#level1001">Levels 1001 - 1500</a>
  <a href="#level1501">Levels 1501 - 2000</a>
</div>
<div class="quickwordtrip">
  <a href="#level2001">Levels 2001 - 2500</a>
  <a href="#level2501">Levels 2501 - 3000</a>
  <a href="#level3001">Levels 3001 - 3500</a>
  <a href="#level3501">Levels 3501 - 4000</a>
</div>
<div class="quickwordtrip">
  <a href="#level4001">Levels 4001 - 4500</a>
  <a href="#level4501">Levels 4501 - 5000</a>
  <a href="#level5001">Levels 5001 - 5500</a>
  <a href="#level5501">Levels 5501 - 6300</a>
</div>

若需要让所有链接模块整体居中，可给这些.quickwordtrip的父容器也添加display: flex; flex-direction: column; align-items: center;样式。

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