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

我最喜欢的技术是在父元素中添加一个s伪元素，将所有元素的子元素包装在一个元素中，然后让该元素和::after伪元素一起播放内联元素-block，vertical-alignment游戏：

::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>的{{1}}伪元素将随着父级的高度动态扩展，因此内部元素将始终垂直居中。

Answer 3

已经看过两种方法。这是使用table和table-cell的另一种方法。将display: table提供给父母，将table-cell和vertical-align: middle提供给孩子并看到魔法。

＆＃13;

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

＆＃13;

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

＆＃13;

垂直居中 - 如何将内嵌元素垂直保留在块级元素的中间

3 个答案: