<td> 的行高是否与其高度相同？

Question

我正在尝试使 div 内的文本水平和垂直对齐。我有两种方法：

将 div 的行高设置为与其高度相同的值：

<!DOCTYPE html>
<html>
 <head>
  <style>
   div {
    border: 1px solid;
    text-align: center;
    height: 400px;
    line-height: 400px;
   }
  </style>
 </head>
 <body>
  
  <div>This is the contents.</div>
  
 </body>
</html>

将 div 的显示更改为 table-cell:

<!DOCTYPE html>
<html>
 <head>
  <style>
   div {
    display: table-cell;
    border: 1px solid;
    width: 500px;
    height: 400px;
    text-align: center;
    vertical-align: middle;
   }
  </style>
 </head>
 <body>
  <div><p>This is the contents.</p></div>
 </body>
</html>

两种方法都有效。看起来他们之间有联系。而display: table-cell;就是让一个元素显示为<td>。所以我的问题是：<td> 的行高是否与其高度相同？

Answer 1

tl;dr：回答标题中的问题：不，table 单元格的行高与其高度不同。

_{当然，在某些情况下，它的高度可以与其行高相同，但这不是你所要求的。}

那么问题在post本身。
如果您确定内容是单行文本，那么解决方案 #1 是最简单的。您甚至不必设置 div; 的高度。设置行高即可。

div {
  border: 1px solid;
  text-align: center;
  line-height: 100px; /* acts the same with or without height:100px */
}

<div>This is the contents.</div>

但是，如果内容可能不止一行，而您想保持相同的总高度，则不能使用line-height。 display:table-cell 是一种可能性，至少如果您还设置了 vertical-align，正如您注意到的那样。（请参阅问题中的片段 #2。）

或者，您可以在 div 中添加一个块元素，然后使用定位将其放在中间。

div {
  border: 1px solid;
  height: 100px;
  position:relative;
}
div p {
  margin:0;
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%, -50%);
}

<div><p>This is the contents<br>and more contents.</p></div>

关于 table 单元格的更多评论：请注意，真正的 table 单元格（和）默认具有 vertical-align:middle，而其他元素如 < div> 有 vertical-align:baseline。所以如果你给一个

display:table-cell，你也必须给它 vertical-align:middle，否则它不会像真正的 table 细胞那样表现。（设置一个属性不会自动更改其他属性。）

<td> 的行高是否与其高度相同？

Does <td> have the same line-height as its height?

css

vertical-alignment

tablecell