表格不会使用 flexbox 垂直居中 [重复]答案

【问题标题】：Table won't vertically center using flexbox [duplicate]表格不会使用 flexbox 垂直居中 [重复]
【发布时间】：2019-09-23 09:53:15
【问题描述】：

我正在尝试使用 flexbox 属性使表格垂直居中，但它不会居中。

我尝试过调整容器/子项的高度，但问题仍然存在。我还尝试了其他垂直居中方法，例如 display: table; / display:table-cell 或 positioning relative 的父级和 top: 50% ,left: 50%; 的绝对子级

.tableWrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

table {
  width: 65%;
  table-layout: fixed;
  font-family: arial, sans-serif;
  border-collapse: collapse;
  border: 1px solid #dddddd;
  word-wrap: break-word;
}

td,
th {
  border: 1px solid #dddddd;
  padding: 8px;
  text-align: center;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

table ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

<!DOCTYPE html>
<html>

<head>
  <style>
  </style>
</head>

<body>
  <main>

    <div class="tableWrap">

      <table>
        <tr>
          <th>Title</th>
        </tr>
        <tr>
          <td>Test0:</td>
        </tr>

        <tr>
          <td>Test1</td>
        </tr>
        <tr>
          <td>Test2:</td>
        </tr>

        <tr>
          <td>
            <ul>
              <li>Test3.</li>
            </ul>
          </td>
        </tr>
      </table>

    </div>

  </main>
</body>

</html>

【问题讨论】：

flexbox 容器 (tableWrap) 仅与table 一样高 - 给它一个高度（比如 100vh），您可以看到垂直对齐。见jsfiddle.net/bchnt5os
哦，我现在明白了。成功了，谢谢！
stackoverflow.com/a/46546152/3597276

标签： html css flexbox center

【解决方案1】：

问题在于 body、html 和 .tableWrap 的高度。它们会自动降低高度。根据您的情况，解决方案是：

html,
body,
main,
.tableWrap{
  height: 100%;
}

【讨论】：