html - 垂直对齐(行高法)不起作用

Question

我的 HTML 文件中的代码如下:

#firstblock h1 {
    font-family:'Open Sans';
    font-size: 12vh;
    text-align: center;
}
#firstblock {
    position: relative;
    height: 200px;
    line-height: 200px;
}

<div id="firstblock">
  <div id="title">
    <h1>TITLE</h1>
  </div>
</div>

我看不出垂直对齐不起作用的原因。我将不胜感激任何帮助，但我宁愿不使用表格方法。非常感谢。

Answer 1

你很接近。在 h1 上将边距设置为 0，您将获得预期的结果。

#firstblock {
  position: relative;
  height: 200px;
  line-height: 200px;
  border: 1px dotted blue;
}
#firstblock h1 {
  font-family: 'Open Sans';
  font-size: 12vh;
  text-align: center;
  margin: 0;
}

<div id="firstblock">
  <div id="title">
    <h1>TITLE</h1>
  </div>
</div>