如何使用css flexbox垂直和水平居中表格？答案

【问题标题】：How to center vertically and horizontally table using css flexbox?如何使用css flexbox垂直和水平居中表格？
【发布时间】：2017-11-26 17:24:03
【问题描述】：

我正在尝试通过flexbox 将表格垂直和水平居中。

一个“屏幕” - 中间有一个表格，正在滚动， - 中间还有另一个表格。

但通过此代码“不起作用”： https://plnkr.co/edit/ZeVdR7n6amQhxeta4R0V

<!doctype html>

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">

<body>
  <div class="wrapper">
    <table>
      <thead>
        <tj>
          <th>1</th>
          <th>1</th>
          <th>1</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>2</td>
          <td>2</td>
          <td>2</td>
        </tr>
        <tr>
          <td>3</td>
          <td>3</td>
          <td>3</td>
        </tr>
        <tr>
          <td>4</td>
          <td>4</td>
          <td>4</td>
        </tr>
      </tbody>

      <tfoot>
        <tr>
          <td>5</td>
          <td>5</td>
          <td>5</td>
        </tr>
      </tfoot>
    </table>
  </div><!-- wrapper end -->

  <div class="wrapper">
  <table>
    <thead>
      <tj>
        <th>1</th>
        <th>1</th>
        <th>1</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>2</td>
        <td>2</td>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
        <td>3</td>
        <td>3</td>
      </tr>
      <tr>
        <td>4</td>
        <td>4</td>
        <td>4</td>
      </tr>
    </tbody>

    <tfoot>
      <tr>
        <td>5</td>
        <td>5</td>
        <td>5</td>
      </tr>
    </tfoot>
  </table>
  <div><!-- wrapper end -->
</body>

<style>
* {
  margin : 0;
  padding : 0;
}

table {
  text-align : center;
}

thead {
  font-weight : bold;
  background : forestgreen;
}

tfoot {
  font-weight : bold;
  background : tomato;
}

th, td {
  width : 5vw;
}

body {
  min-height : 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrapper {
  min-height : 100vh;
}
</style>

我哪里错了？

【问题讨论】：

标签： html css html-table flexbox

【解决方案1】：

如果要让table 的每个都居中每个全屏/视口，要在两个表之间滚动，请检查下面的示例 1，我将所有属性从 body 规则移动到 .wrapper 规则。

如果您打算将 2 个table 放在一起，请查看下面的示例 2，其中设置了 flex-direction: column。

要将table 并排居中，请从wrapper 规则中删除min-height: 100vh，示例3。

示例 1 - 每个全屏/视口一个

* {
  margin : 0;
  padding : 0;
}

table {
  text-align : center;
}

thead {
  font-weight : bold;
  background : forestgreen;
}

tfoot {
  font-weight : bold;
  background : tomato;
}

th, td {
  width : 5vw;
}

.wrapper {
  min-height : 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="wrapper">
    <table>
      <thead>
        <tr>
          <th>1</th>
          <th>1</th>
          <th>1</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>2</td>
          <td>2</td>
          <td>2</td>
        </tr>
        <tr>
          <td>3</td>
          <td>3</td>
          <td>3</td>
        </tr>
        <tr>
          <td>4</td>
          <td>4</td>
          <td>4</td>
        </tr>
      </tbody>

      <tfoot>
        <tr>
          <td>5</td>
          <td>5</td>
          <td>5</td>
        </tr>
      </tfoot>
    </table>
  </div><!-- wrapper end -->

  <div class="wrapper">
  <table>
    <thead>
      <tr>
        <th>1</th>
        <th>1</th>
        <th>1</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>2</td>
        <td>2</td>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
        <td>3</td>
        <td>3</td>
      </tr>
      <tr>
        <td>4</td>
        <td>4</td>
        <td>4</td>
      </tr>
    </tbody>

    <tfoot>
      <tr>
        <td>5</td>
        <td>5</td>
        <td>5</td>
      </tr>
    </tfoot>
  </table>
  <div><!-- wrapper end -->

示例 2 - 相互重叠

* {
  margin : 0;
  padding : 0;
}

table {
  text-align : center;
}

thead {
  font-weight : bold;
  background : forestgreen;
}

tfoot {
  font-weight : bold;
  background : tomato;
}

th, td {
  width : 5vw;
}

body {
  min-height : 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

<div class="wrapper">
    <table>
      <thead>
        <tr>
          <th>1</th>
          <th>1</th>
          <th>1</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>2</td>
          <td>2</td>
          <td>2</td>
        </tr>
        <tr>
          <td>3</td>
          <td>3</td>
          <td>3</td>
        </tr>
        <tr>
          <td>4</td>
          <td>4</td>
          <td>4</td>
        </tr>
      </tbody>

      <tfoot>
        <tr>
          <td>5</td>
          <td>5</td>
          <td>5</td>
        </tr>
      </tfoot>
    </table>
  </div><!-- wrapper end -->

  <div class="wrapper">
  <table>
    <thead>
      <tr>
        <th>1</th>
        <th>1</th>
        <th>1</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>2</td>
        <td>2</td>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
        <td>3</td>
        <td>3</td>
      </tr>
      <tr>
        <td>4</td>
        <td>4</td>
        <td>4</td>
      </tr>
    </tbody>

    <tfoot>
      <tr>
        <td>5</td>
        <td>5</td>
        <td>5</td>
      </tr>
    </tfoot>
  </table>
  <div><!-- wrapper end -->

示例 3 - 并排

* {
  margin : 0;
  padding : 0;
}

table {
  text-align : center;
}

thead {
  font-weight : bold;
  background : forestgreen;
}

tfoot {
  font-weight : bold;
  background : tomato;
}

th, td {
  width : 5vw;
}

body {
  min-height : 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="wrapper">
    <table>
      <thead>
        <tj>
          <th>1</th>
          <th>1</th>
          <th>1</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>2</td>
          <td>2</td>
          <td>2</td>
        </tr>
        <tr>
          <td>3</td>
          <td>3</td>
          <td>3</td>
        </tr>
        <tr>
          <td>4</td>
          <td>4</td>
          <td>4</td>
        </tr>
      </tbody>

      <tfoot>
        <tr>
          <td>5</td>
          <td>5</td>
          <td>5</td>
        </tr>
      </tfoot>
    </table>
  </div><!-- wrapper end -->

  <div class="wrapper">
  <table>
    <thead>
      <tj>
        <th>1</th>
        <th>1</th>
        <th>1</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>2</td>
        <td>2</td>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
        <td>3</td>
        <td>3</td>
      </tr>
      <tr>
        <td>4</td>
        <td>4</td>
        <td>4</td>
      </tr>
    </tbody>

    <tfoot>
      <tr>
        <td>5</td>
        <td>5</td>
        <td>5</td>
      </tr>
    </tfoot>
  </table>
  <div><!-- wrapper end -->

【讨论】：

感谢您的回复，但是，为什么在body 和.wrapper 中使用flexbox 不同？
@LexUshakov 因为display: flex 只向下工作一级，所以在您的情况下，wrapper 变成了弹性行项目，而不是 table 的。如果您在原始代码中为 wrapper 添加边框，您将看到它们是如何呈现的，并且可能还会理解原因