下面是另一种垂直居中元素的方法。我以前遇到过this technique。基本上它使用了一个伪元素和vertical-align：中间。

.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;
}

因为已经是2019年了，你也可以使用flexbox来实现这一点：）
为此，请将以下类添加到父元素中：

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

见此Fiddle

我试着把文本放在另一个元素里，你知道（或设置）它的大小，然后设置它的相对位置，顶部，左50%和负的左右边距。
See this Fiddle
唯一的问题是这依赖于一个已知的/固定的文本块。如果文本是可变的，恐怕你将不得不求助于使用Javascript。

关于超链接：
我有这个关于主菜单中的链接的问题。因为它是<li>标签中的<a>，我需要一些表面的链接是可点击/可触摸的（参见touch target size）。因此，我为<ul>设置了一个固定的高度（在本例中通过它的父级），<li>-s是它的百分比，<a>-s设置了最小高度和行高属性，从那里很容易设置顶部。代码：

.menu-header-main-container{
position: fixed;
top: 0;
bottom: 160px;
}    
.menu-header-main-container ul.menu {
          height: 100%; }
          .menu-header-main-container ul.menu li {
            height: 33.33%;
            max-height: 110px; }
            .menu-header-main-container ul.menu li a {
              line-height: 40px;
              min-height: 40px;
              top: calc(50% - 20px);
              position: relative; } }

您不能仅使用CSS将行高设置为父元素高度的100%。相反，您可以使用CSS将元素垂直居中。
第一个

哇，2022年，我不认为我们有一个体面的方式来做到这一点仍然。我曾经做的，我认为是不那么痛苦的想法是使用一个表格的布局。表格将自然居中文本垂直，或者你可以使用“垂直对齐”

<table style="width: 100%; height: 100%; text-align: center">
    <tr><td>Your text</td></tr>
   </table>

不是很好，但至少你可以将文本居中，而不必指定固定的高度。