html - 在不知道多少行的情况下将文本在框中垂直居中

Question

这让我抓狂我只是不明白为什么这个简单的 css 在 div 中垂直居中元素不能按预期工作。

这是 html:

<div class="header-a-wrapper" style="
    line-height: 48px;
    height: 48px;
    background: red;
    display: block;
    text-align: center;
">
    <a href="/user/5659186348163072" class="right" style="
    background: blue;
    line-height: normal;
    display: inline-block;
    vertical-align: middle;
    float: none;
    height: 20px;
">medical salamander</a>

</div>

内部元素没有垂直居中，但我认为它应该垂直居中

这是一个包含两个元素的 html: http://alephz.com/test.html

这是疯狂的部分。这是一个具有相同 html 的 jsfiddle，它在那里工作!在相同的 chrome/win7 上测试! http://jsfiddle.net/pkrsdqkb/

Answer 1

很奇怪，但是如果你想解决它，你添加到'a':

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

删除

vertical-align: middle;
float: none;