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

Question

我有一个响应元素,它的宽度和高度都会缩放.在这里我有一些文字,我想垂直居中.

line-height如果我不知道父母的身高,我怎样才能将文本设置为与父文本相同？

line-height: 100% 是相对于字体的常规高度所以这没有帮助...

Answer 1

这是另一种垂直居中元素的方法.我不久前遇到过这种技术.基本上它使用伪元素和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;
}

Answer 2

由于已经是 2019 年了，您还可以使用 flexbox 来实现这一点:)

为此，请将以下类添加到父元素：

display: flex;
flex-direction: column;
justify-content: center;

看到这个小提琴