CSS类无法应用于HTML div，嵌套div居中异常问题求助

嘿，我来帮你搞定这个居中问题！

首先咱们得搞清楚为啥按钮能居中但嵌套的questions div不行：默认情况下，按钮是行内块元素（inline-block），当你给父容器buttons设置text-align: center时，行内/行内块元素会乖乖居中，但div是块级元素，text-align对它本身不起作用——它只会让questions内部的行内元素居中，而不是让questions自己在buttons里居中。

给你两个靠谱的解决方案，选一个适合你的就行：

方案1：用margin:auto（传统方法） #

给questions div设置一个明确的宽度，再加上margin: 0 auto，这样它就能在父容器里水平居中了。示例CSS：

#buttons {
  text-align: center; /* 让按钮保持居中 */
}

#questions {
  width: 80%; /* 可以换成固定值比如600px，根据你的页面需求调整 */
  margin: 0 auto; /* 上下边距0，左右自动平分空间，实现水平居中 */
  /* 如果需要questions内部的内容也居中，再加text-align: center; */
}

方案2：用Flex布局（更现代的方法） #

直接把父容器buttons改成flex布局，这样不管子元素是行内块还是块级元素，都能轻松居中，还不用给questions设置宽度：

#buttons {
  display: flex;
  flex-direction: column; /* 让子元素保持垂直排列，和原来的布局逻辑一致 */
  align-items: center; /* 让所有子元素（按钮+questions）水平居中 */
  /* 如果需要垂直方向也居中，可以再加justify-content: center; 记得给buttons设置合适的高度哦 */
}

另外要注意检查一下：有没有其他CSS规则给questions加了float、position: absolute或者left/right属性？这些属性会破坏居中效果，得先把它们去掉才行。

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