我的Flexbox CSS未按预期生效，如何实现页面元素居中？

问题根源 #

你写的display: flex auto 0 1;是错误语法：display: flex是独立的容器声明，auto 0 1属于flex属性的取值，仅适用于Flex容器的子元素，不能跟display属性混写，这直接导致flex布局未生效。

修正后的CSS代码 #

body {
  margin: 0;
  display: flex; /* 正确声明为Flex容器 */
  flex-direction: column; /* 让子元素垂直排列，匹配内容结构 */
  justify-content: center; /* 实现垂直方向居中 */
  align-items: center; /* 实现水平方向居中 */
  height: 100vh;
  gap: 1rem; /* 可选：给元素间添加间距，优化视觉效果 */
}

额外优化建议 #

你的提交按钮是type="submit"但不在<form>标签内，点击无法触发表单提交，建议调整HTML结构，将相关元素包裹进表单内：

<form class="form" id="form">
  <h4 class="score" id="score">score :0</h4>
  <h1 id="Question">What is 1 multiply by 1?</h1>
  <input type="text" class="input" id="input" placeholder="Enter your answer" autofocus autocomplete="off">
  <button type="submit" class="btn">submit</button>
</form>

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