垂直居中 - 如何将内联元素垂直放置在块级元素的中间

Question

我有一个 <div> 包含一个句子。 <div> 的高度基于 % （其高度可变 - 取决于屏幕尺寸）。现在我想把那句话放在 <div> 的中心（垂直），我该怎么做？

这是我所说的示例：

div{
  position:absolute;
  border: 1px solid;
  width: 250px;
  height: 60%;
  text-align: center;
}

<div>This should be center vertically</div>

Answer 1

使用flexbox

div{
  position:absolute;
  border: 1px solid;
  width: 250px;
  height: 60%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div>This should be center vertically</div>

Answer 2

我最喜欢的技术是向父元素添加一个 ::after 伪元素，将元素的所有子元素包装在一个元素中，然后让该元素和 ::after 伪元素一起玩内联块、垂直对齐游戏：

div{
  position:absolute;
  border: 1px solid;
  width: 250px;
  height: 60%;
  text-align: center;
}
div span {
  display: inline-block;
  vertical-align: middle;
}
div::after {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

<div><span>This should be centered vertically, and now it is!</span></div>

具有height: 100%的::after伪元素将随着父元素的高度动态扩展，因此内部元素将始终垂直居中。

Answer 3

已经看到两种方法。这是另一种使用 table 和 table-cell 的方法。将 display: table 交给 parent，将 table-cell 和 vertical-align: middle 交给 child，看看魔法。

div{
  position:absolute;
  border: 1px solid;
  width: 250px;
  display: table;
  height: 60%;
  text-align: center;
}
div span {
  display: table-cell;
  vertical-align: middle;
}

<div><span>This should be centered vertically</span></div>

垂直居中 - 如何将内联元素垂直放置在块级元素的中间

Vertical Centering - How to keep an inline element in the middle of a block-level element vertically

html

css

vertical-alignment