html - td的默认css，自动居中

Question

td 的默认 css 是什么，它使内容自动垂直居中？

我知道如何让东西水平居中，因为一个 div 小于它的父级 margin: 0 auto 但什么允许 td 自动垂直居中？

#outer {
  width: 200px;
  height: 200px;
  background-color: yellow;
}

#inner {
  width: 60%;
  margin: auto;
  background-color: red;
}

<div id="outer">
  <div id="inner">
    centered only horizontally
  </div>
</div>

<table height=200 border=1>
  <tr>
    <td>
      I center automatically
    </td>
  </tr>
</table>

Answer 1

td 元素的默认 css 是 display: table-cell。此属性也将接受 vertical-align。

因此，您可能需要设置 css:

td {
  vertical-align: middle;
}

.outer {
  display: table-cell;
  vertical-align: middle;
  width: 400px;
  height: 200px;
  border: 1px solid black;
}

.inner {
  width: 60%;
  margin: 0 auto;
  background-color: yellow;
  text-align: center;
}

<table height="200" border="1">
  <tr>
    <td>I am vertically centered</td>
  </tr>
</table>

<div class="outer">
  <div class="inner">
    This is vertically centered
  </div>
</div>