为何按钮与h1标签仍同行？如何实现Play Again按钮与h1分行显示？

这是因为你的.winner容器用了display: flex，而Flexbox布局的默认主轴方向是水平（row），容器里的子元素（h1和button）会自动沿水平方向排列，所以它们挤在了同一行。哪怕你给button加了display: block也没用——flex容器里的子元素会被当作flex item处理，普通的块级元素规则会被Flexbox的布局逻辑覆盖。

要让它们垂直分开展示，有几种简单的处理方法：

方法1：修改Flex容器的主轴方向（最推荐） #

直接给.winner添加flex-direction: column，把主轴改成垂直方向，这样里面的元素就会从上到下排列，同时还能保留原来的居中效果：

.winner {
  background-color: #9792e3;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column; /* 新增：设置子元素垂直排列 */
  justify-content: center;
  align-items: center;
  transform: translateY(-100%);
}

方法2：让单个元素占满整行（适合混合排列场景） #

如果你需要保留水平主轴，但想让h1单独占一行，可以给h1添加flex: 0 0 100%（或者width: 100%），强制它占满容器宽度，这样button就会被挤到下一行：

.won {
  color: #e85f5c;
  font-family: "Anton", sans-serif;
  font-size: 3rem;
  flex: 0 0 100%; /* 强制占满整行 */
  text-align: center; /* 让标题文字居中，避免左对齐 */
}

两种方法里，第一种最贴合你的需求，操作最简单，也能完美保持元素的居中状态。

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