HTML按钮无法在Div容器中居中的问题求助

问题背景 #

页面通过row嵌套两个column实现左右分栏，右侧栏内的文本通过display: flex + justify-content: center可正常居中，但按钮无响应；用margin临时调整后，页面缩放时按钮位置无法自适应。

问题原因 #

给按钮设置display: flex + justify-content: center仅会让按钮内部的文字居中，而非让按钮自身在父容器（右侧栏）中水平居中。

可行解决方案 #

方案一：直接让按钮自身居中（推荐，改动最小） #

修改.btnQuiz的CSS样式，添加自动左右外边距，同时移除不必要的flex属性：

.btnQuiz {
  font-family: "Montserrat", sans-serif;
  background-color: #ffe31c;
  border-radius: 10px;
  border: none;
  color: black;
  padding: 11px 28px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  /* 核心：让按钮在父容器中水平居中 */
  margin: 20px auto 0; /* 上外边距20px，左右自动，下0 */
}

说明：margin: 0 auto会让块级/行内块元素在父容器中水平居中，添加20px上外边距是为了和上方列表保持间距，更美观。

方案二：给右侧栏设置flex布局（适合需要所有元素居中的场景） #

如果希望右侧栏内所有元素都自动水平居中，可以修改右侧栏的布局，同时简化子元素的样式：

1. 修改.right的CSS：

.right {
  background: linear-gradient(to left, #55524e, #171716);
  width: 50%;
  /* 父容器.row已是flex布局，float无需保留 */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px; /* 可选：避免内容贴边 */
}

2. 简化标题和列表项的样式（移除多余的flex属性）：

h1.mainH1 {
  color: white;
  font-size: 2.5vw;
  margin-top: 1em;
}

h2.mainH2 {
  color: white;
  font-size: 2vw;
  font-family: "Montserrat", sans-serif;
  margin-top: 20px;
}

.listItems {
  color: white;
  font-size: 1vw;
  font-family: "Montserrat", sans-serif;
  text-align: center; /* 让列表文字自身居中 */
}

说明：父容器设置为flex列布局后，align-items: center会让所有子元素自动水平居中，页面缩放时也能保持自适应。

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