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. （这是这种顽固的属性实际起作用的罕见情况之一 - 在表格单元格和内联元素上。）

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