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

Question

我有一个响应式元素，它的宽度和高度都会自动调整。在这个元素内部，我有一些文本，我想要垂直居中。

如果我不知道父元素的高度，我该如何将文本的行高设置为与父元素相同？ line-height: 100% 是相对于字体的正常高度，所以这并没有帮助...

- smilly92

---

这些情况不是使用 em 单位类型吗？ - Uwe Keim

没有 JS 的话，我怀疑你能否做到这件事。 - lanzz

唉，em 只会相对于字体大小进行缩放，而不是父元素的尺寸。 - Klaas Leussink

请参考以下问题的解释：http://www.jakpsatweb.cz/css/css-vertical-center-solution.html - Bud Damyanov

提供您的实际代码肯定会帮助我们提供特定情况的答案。 - Giona

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

- Mr. 14

Answer 2

既然已经是2019年了，你也可以使用flexbox来实现这个效果 :)

要做到这一点，只需将以下类添加到父元素中：

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

查看这个Fiddle

- bjarkig82

---

由于现在已经是2019年了，仍有人在使用IE浏览器，因此不幸的是这种情况下并不能保证所有条件都能正常工作。 - Joe

不要听那些否定者的话。在2019年，任何使用IE浏览器的人都应该预料到互联网看起来会很糟糕。 - Randy Hall

由于这是网站开发，您应该为那些没有flexbox的用户提供某种优雅的降级。完全同意它在视觉上可能看起来像垃圾，但它仍然应保持功能性、可用性和意义。 - Simon Dell

Flexbox是一种很好的方式。IE已被正式弃用。然而，这种方法不会很好地渲染text-overflow: ellipsis，但这只是一个真正的边缘情况。 - kloddant

Answer 3

关于超链接：

我在主菜单中遇到了链接问题。由于它是在<li>标签中的<a>，我需要为链接提供可点击/可触摸的表面（请参见触摸目标大小）。 因此，我设置了<ul>的固定高度（通过其父元素），<li>是其百分比，<a>具有最小高度和行高属性，并且很容易设置顶部。代码如下：

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

- D. Dan

Answer 4

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

.parent {
   height:150px;
   position:relative;
   border:1px solid #FDD;
}
.position-center {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
}

<div class="parent">
  <span class="position-center">I am vertically centered element</span>
</div>

- Rejaul

Answer 5

我建议将文本放在另一个元素中，该元素的大小已知（或设置）。然后将其相对定位，顶部和左侧为50％，并设置负左右边距。

请参见此Fiddle

唯一的问题是这取决于已知/固定的文本块。如果文本是可变的，则不得不使用JavaScript。

- Klaas Leussink

Answer 6

哇，已经到了2022年，我认为我们仍然没有一个像样的方法来做到这一点。我过去使用的方法，也是我认为最不痛苦的想法，就是使用表格进行布局。表格会自然地使文本垂直居中，或者您可以使用“vertical-align”。

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

不是很好，但至少你可以在不指定固定高度的情况下居中文本。

- Marcio Lucca