flex-direction设为column时，如何水平居中容器内的div？

没问题，我帮你搞定这个需求～你的场景是在一个flex column布局的容器里，同时存在占满宽度的表格和需要水平居中的flex column子容器，核心是要让两者的布局互不影响，我给你两个简单可行的方案：

方案一：利用margin: auto实现居中 #

在flex容器中，margin: auto会自动分配元素两侧的剩余空间，刚好可以用来实现水平居中。你只需要修改.container2的margin属性，把左右边距设为auto即可，同时保留你原来的上下边距：

.container2 {
  margin: 2.5em auto 0; /* 将左右边距从0改为auto */
  display: flex;
  flex-direction: column; /* 补充你需求里的flex column设置 */
  max-width: 30%;
  text-align: center;
}

这个方案的好处是不需要修改父容器.container的样式，只调整目标元素即可，非常直观。

方案二：通过align-self单独控制子元素对齐 #

另一种思路是给父容器.container设置默认的水平对齐方式为左对齐，然后让.container2自己“跳出”默认规则，设置居中对齐：

.container {
  display: flex;
  flex-direction: column;
  border: 1px solid red;
  align-items: flex-start; /* 设置子元素默认左对齐 */
}

.container2 {
  margin: 2.5em 0 0;
  display: flex;
  flex-direction: column;
  max-width: 30%;
  text-align: center;
  align-self: center; /* 让当前元素单独居中 */
}

这种方式更适合后续有多个不同对齐需求的子元素场景，扩展性更强。

完整示例代码 #

我把你的代码补全并优化了细节，方便你直接测试：

<div class="container">
  <table class="mytable">
    <tr>
      <th>表头1</th>
      <th>表头2</th>
    </tr>
    <tr>
      <td>内容单元格1</td>
      <td>内容单元格2</td>
    </tr>
  </table>
  <div class="container2">
    <div class="question">这是需要水平居中的内容块</div>
    <p>更多说明文本...</p>
  </div>
</div>

<style>
.container {
  display: flex;
  flex-direction: column;
  border: 1px solid red;
  padding: 1rem; /* 增加内边距提升视觉效果 */
}

.mytable {
  width: 100%;
  border-collapse: collapse; /* 合并表格边框，避免重复线条 */
}

table, th, td {
  border: 1px solid black;
  padding: 0.5rem; /* 表格单元格内边距 */
}

.container2 {
  margin: 2.5rem auto 0;
  display: flex;
  flex-direction: column;
  max-width: 30%;
  text-align: center;
  background-color: #f5f5f5; /* 背景色区分区块 */
  padding: 1rem;
  border-radius: 4px;
}

.question {
  padding: 5px 20px;
  line-height: 20px;
  font-size: 14px;
}
</style>

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