Flexbox不会在表格单元格中垂直居中div

Question

为什么红色div不垂直居中？

我的笔：http://codepen.io/helloworld/pen/aWWgBK?editors=1000

<table style="border:1px solid black" class="table">
  <thead>

    <th>selected</th>
    <th>Name</th>
  </thead>
  <tbody>
    <tr>

      <td class="align-middle"><input type="checkbox"></td>
      <td style="display: flex; align-items: center;">
        <div style="background:red;"> this text should be vertically aligned in the center of the table cell </div>

      </td>
      <td class="align-middle">
        <div class="btn-group">
          <button class="btn btn-primary">Speichern</button>
          <button type="button" class="btn btn-secondary">Abbrechen</button>
        </div>
      </td>
      <td>
        <ul>
          <li>item 1</li>
          <li>item 2</li>
          <li>item 3</li>
          <li>item 4</li>
          <li>item 5</li>
          <li>item 6</li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

当您将表格单元格的display值从table-cell更改为flex时，它似乎会破坏表格算法。

但是要垂直居中表格单元格的内容，您只需要vertical-align: middle。 （这是this stubborn property实际工作的罕见情况之一 - 关于表格单元格和内联元素。）

http://codepen.io/anon/pen/wddVPy?editors=1000