Question

我试图将具有固定高度的容器内的可变长度文本居中。我以为我找到了一个带有绝对定位包装容器的解决方案，使用

top: 50%;
transform: translateY(-50%);

关于要居中的文本。它在Firefox和IE中运行良好，但在Chrome中不起作用：

小提琴：https://jsfiddle.net/9uathmvh/7/

有谁知道为什么？在此先感谢：）

Answer 1

这是因为锚标记不是块元素。

我删除了.container和.link类中的排名规则，只设置100%的锚元素高度以填充其容器。

在我看来，最好将整个a.link垂直居中，而不仅仅是其内容，但我不知道你的确切需求，所以我就像你问的那样离开了它。

请查看以下代码段：

.container {
  height: 42px;
  width: 200px;
  border: 1px solid blue;
  margin-bottom: 5px;
}

.link {
  height: 100%;
  display: block;
} 

.center {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

<div class="container">
  <a class="link">
    <div class="center">
      Centered Text in one line
    </div>
  </a>
</div>
<div class="container">
    <a class="link">
    <div class="center">
      Centered Text, more than one line but still centered
    </div>
  </a>
</div>

使用translateY进行垂直居中在Chrome中无效

1 个答案: