Html 带位置的垂直对齐：绝对

我正在尝试将应用了

position:absolute

的

中的文本居中对齐（可能跨几行，也可能不跨几行）

请考虑以下标记：

<div class="item">
    <img src="test.jpg" />
    <div class="overlay">
        <a href="#">Some long content</a>
    </div>
</div>

除了水平居中对齐外，我还希望

.overlay

中的文本垂直对齐到中间。我尝试添加以下内容：

.item {
    display: table;

    .overlay {
        display: table-cell;
        vertical-align: middle;
    }
}

我也尝试了

内联块

，但没有任何帮助，因为元素是绝对定位的。我不能在这里使用通常的

行高

技巧，因为文本可能跨越多行，指定较大的行高将破坏布局

有人知道（相对）跨浏览器的方法来解决这个问题吗？它需要在IE9+、FF和Chrome中工作。如果可能，我希望避免添加任何附加标记或“divitis”

我已经准备了一个JSFIDLE来演示我的问题（当

位置

！=

绝对

时，您还将看到通常的技巧工作正常）：

---

使用伪元素，如

：before

和

内联块

，方法如下：

.item .overlay:before {
  content:" ";
  display:inline-block;
  vertical-align:middle;
  height:100%;
}
.item .overlay a {
  display:inline-block;
  vertical-align:middle;
  color: #fff;
}

选中此项

---

您可能需要处理这些内联块项目之间的空间我使用右边距只需将绝对定位元素设置为“定位”容器，并将实际元素容器放入其中，如下所示-

HTML:

---

如果使用绝对位置，我发现这个解决方案每次都有效

.item .overlay{
   top:50%;
   -webkit-transform:translateY(-50%);
}

---

谢谢你抽出时间。当我尝试实现这一点时，

元素被按下>@BenM h4是默认的块元素，因为我的示例更改了a标记的显示，在这种情况下，h4标记也是…感谢您的时间。很好。Np@BenM很乐意帮忙you@streetlogics正如我再次提到的，内联块的技巧。。。而且是交叉划船。只是停止垃圾邮件这个答案，它确实对齐你的覆盖在中间。那为什么投反对票呢？你也可以将同样的方法应用到你的文本中，它也会起作用。不要只是复制，还要使用自己的代码。

<div class="item">
    <img src="http://placehold.it/350x150.jpg" />
    <div class="overlay">
        <div class="inner-container">
            <div class="inner-cell">
                <a href="#">Some long content</a>
            </div>
        </div>
    </div>
</div>

.item {
    position: relative;
    width: 350px;
    display: table;
}
    .item .overlay {
        position: absolute;
        z-index: 2;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,.5);
        text-align: center;
        width: 100%;
        height:100%;
        vertical-align: middle;
    }
        .inner-container{
            width: 100%;
            height: 100%;
            display:table;
        }
        .inner-cell {
            display:table-cell;
            vertical-align: middle;
            text-align: center;
        }
            .item .overlay a {
                color: #fff;
            }

.item .overlay{
   top:50%;
   -webkit-transform:translateY(-50%);
}