当 div 是固定高度时，垂直居中不会垂直居中

Question

见下文：

.fixed-height {
  height: 100px;
  background-color: green;
}

.fixed-height h1 {
  font-size: 14px;
  color: red;
  display: inline;
  vertical-align: middle;
}

<div class="fixed-height">
  <h1>VERTICAL ALIGN ME</h1>
</div>

https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

The vertical-align CSS property sets vertical alignment of an inline, inline-block or table-cell box.

Vertically Align a Header Tag with Fixed Height through CSS

/* 
This 

but it doesnt work either, it cuts the div short and isn't in the middle

*/

.fixed-height {
  height: 100px;
  background-color: green;
  display: inline-table
}

.fixed-height h1 {
  font-size: 14px;
  color: red;
  vertical-align: middle;
}

<div class="fixed-height">
  <h1>VERTICAL ALIGN ME</h1>
</div>

怎么盒子变短了？
怎么到不了中间？

所以我知道我可以做到：

/* 
Flex Version
*/

.fixed-height {
  height: 100px;
  background-color: green;
  display: flex;
  align-items: center;
}

.fixed-height h1 {
  font-size: 14px;
  color: red;
  vertical-align: middle;
}

<div class="fixed-height">
  <h1>VERTICAL ALIGN ME</h1>
</div>

为了尽快完成这件事，我做了什么...

但我想知道为什么垂直对齐在文档中所说的内联元素或内联框时不起作用。

Answer 1

您可以使用与容器高度相同的 line-height 设置。这将使 h1 垂直居中，无需任何进一步设置：

.fixed-height {
  height: 100px;
  background-color: green;
}

.fixed-height h1 {
  font-size: 14px;
  line-height: 100px;
  color: red;
}

<div class="fixed-height">
  <h1>VERTICAL ALIGN ME</h1>
</div>

当 div 是固定高度时，垂直居中不会垂直居中

vertical align middle wont vertical align middle when the div is a fixed height

html

css

vertical-alignment