CSS布局问题：如何让newGame容器内的按钮居中？

你的问题核心在于.container的flex布局设置：当前justify-content: space-around会让容器内的homeTitle、guestTitle和newGame三个元素横向分散排列，直接导致newGame被挤到右侧角落。下面提供两种简单可行的解决思路：

方法一：将按钮移到容器外单独居中（推荐） #

这种方案对原有计分板布局改动最小，逻辑清晰：

1. 调整HTML结构，把.newGame从.container内移出：

<body>
  <div class="container">
    <div class="homeTitle">
      <h3>HOME</h3>
      <div class="scoreBox">
        <h1 id="scoreHome">0</h1>
      </div>
      <div class="scoreBtn">
        <button onclick="plusOneHome()">+1</button>
        <button onclick="plusTwoHome()">+2</button>
        <button onclick="plusThreeHome()">+3</button>
      </div>
    </div>
    <div class="guestTitle">
      <h3>GUEST</h3>
      <div class="scoreBox">
        <h1 id="scoreAway">0</h1>
      </div>
      <div class="scoreBtn">
        <button onclick="plusOneAway()">+1</button>
        <button onclick="plusTwoAway()">+2</button>
        <button onclick="plusThreeAway()">+3</button>
      </div>
    </div>
  </div>
  <!-- 移到容器外 -->
  <div class="newGame">
    <button>New Game</button>
  </div>
  <script src="index.js"></script>
</body>

2. 给.newGame添加居中样式：

.newGame {
  margin-top: 20px; /* 可选，和计分板拉开间距 */
  text-align: center;
}

.newGame button {
  background-color: #1B244A; /* 和计分板背景呼应 */
  color: white;
  border: 2px solid #9AABD8;
  border-radius: 5px;
  padding: 8px 16px;
  cursor: pointer;
}

方法二：在原有容器内调整布局 #

如果必须保留按钮在.container内，可以修改容器的flex方向，同时嵌套横向布局容器：

1. 修改.container及新增嵌套容器的CSS：

.container {
  display: flex;
  flex-direction: column; /* 改为纵向排列 */
  align-items: center; /* 水平居中所有子元素 */
  background: #1B244A;
  width: 575px;
  height: auto; /* 自适应高度避免内容溢出 */
  padding: 20px;
}

/* 新增容器包裹home和guest，实现横向排列 */
.score-board {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

2. 调整HTML结构，用score-board包裹home和guest模块：

<div class="container">
  <div class="score-board">
    <div class="homeTitle">...</div> <!-- 内容保持不变 -->
    <div class="guestTitle">...</div> <!-- 内容保持不变 -->
  </div>
  <div class="newGame">
    <button>New Game</button>
  </div>
</div>

3. 给.newGame补充样式：

.newGame {
  margin-top: 20px;
}

.newGame button {
  background-color: transparent;
  border-color: #9AABD8;
  border-radius: 5px;
  color: white;
  padding: 8px 16px;
  cursor: pointer;
}

两种方案都能实现按钮居中效果，优先推荐第一种，对原有布局的侵入性最低。

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