css – 将行高设置为相对于父元素的百分比

我有一个响应元素，它的宽度和高度都将缩放。在这里我有一些文本，我想垂直居中。

如果我不知道父级的高度，如何设置文本的行高与它的父级相同？

line-height：100％是相对于字体的常规高度，所以这不帮助…

解决方法

这是另一种垂直居中元素的方法。我以前碰到过 this technique。基本上它使用伪元素和vertical-align：middle。

.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered,can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

原文地址：https://www.jb51.cc/css/221242.html