html - 水平居中并调整内容

Question

我有 3 个选项卡:A、B 和 C。每个选项卡包含不同大小的内容。 A 和 B 的水平尺寸相对较短，但可以垂直增长，而 C 包含一个也可以垂直增长但主要是水平增长的表格。

我想将所有内容(包括选项卡本身)水平居中，这样无论您在哪个选项卡上单击，所有内容始终居中(水平)并根据内容进行调整(填充 View 的 x% 或 100%溢出时的滚动条，即表格变得太宽)。

在尝试了不同种类的 flexbox 配置后，我总是以非居中或截断内容结束。后者意味着当单击 C 选项卡时， View 在左侧被切断 - 包括 A 选项卡的一半。

到目前为止我得到了(我省略了中间的一些 div):

+---------.content----------+
|                           |
|    +-----------------+    |
|    |  A  |  B  |  C  |    |
|    +-----------------+    |
|    |                 |    |
|    |                 |    |
|    |                 |    |
|    +-----------------+    |
+---------------------------+

.content {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

然而，如上文所述，当单击 C-tab(包含表格，不适合视口(viewport))时，内容在左侧被截断

Answer 1

display: flex 仅影响其直接后代。

表格也是一种不寻常的野兽。

在不了解更多并且无法先在评论中询问更多信息(愚蠢的 SO 应用程序)的情况下，我建议您尽量减少嵌套后代。

我还建议查看 table-layout: fixed 和“如何使 tbody 可滚动”