如何将两个<h>标签作为一个整体居中且上下堆叠显示？

要实现两个标签作为整体居中且保持上下堆叠，关键是调整Flexbox的主轴方向——默认的row会让元素横向排列，改成column就能垂直堆叠，再配合对齐属性实现整体居中：

实现代码示例 #

HTML

<div class="heading-wrapper">
  <h1>主标题</h1>
  <h2>副标题</h2>
</div>

CSS

.heading-wrapper {
  display: flex;
  flex-direction: column; /* 将主轴改为垂直方向，子元素自动上下堆叠 */
  align-items: center; /* 让子元素在水平方向居中，实现整体居中效果 */
  
  /* 可选：如果需要让整个标题组在页面垂直居中，添加以下两行 */
  min-height: 100vh;
  justify-content: center;
}

原理说明 #

• flex-direction: column：把Flex容器的主轴从默认的水平（row）改成垂直（column），子元素会沿垂直方向依次排列，自然实现上下堆叠。
• align-items: center：在垂直主轴的情况下，align-items控制的是水平方向的对齐，让所有子元素在水平方向居中，从而让整个标题组看起来是整体居中的。
• 若需要垂直方向也居中，通过min-height: 100vh让容器占满视口高度，再用justify-content: center控制垂直主轴上的对齐，就能让标题组在页面正中央。

简化场景（仅水平居中） #

如果不需要垂直居中，只需要标题组在水平方向居中，代码可以更简洁：

.heading-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

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