Question

我正在尝试将<div>应用于position: absolute的文本居中对齐（可能跨越多行，也可能不跨越多行）。

请考虑以下标记：

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

应用的CSS如下（请注意这是LESS版本）：

.item {
    position: relative;

    img {
        position: relative;
        z-index: 1;
    }

    .overlay {
        position: absolute;
        z-index: 2;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,.5);
        text-align: center;

        a {
            color: #fff;
        }
    }
}

除了水平居中对齐外，我还希望.overlay内的文字与中间垂直对齐。我尝试添加以下内容：

.item {
    display: table;

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

我也尝试了inline-block但没有任何帮助，因为元素绝对定位。我不能在这里使用通常的line-height技巧，因为文本可能跨越几行，指定一个较大的行高会破坏布局。

有没有人知道（相对）跨浏览器方法来解决这个问题？它需要在IE9 +，FF和Chrome中运行。如果可能的话，我想避免添加任何额外的标记或'divitis'。

我已经把一个jsFiddle放在一起来演示我的问题（你也会看到position！= absolute时常用的技巧工作正常：

jsFiddle Demo

Answer 1

以这种方式使用:before和inline-block这样的伪元素：

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

选中 Demo Fiddle

_{您可能需要处理这些内嵌块项之间的空格 HERE 我使用margin-right}

Answer 2

只需将绝对定位元素设为“定位”容器，并将实际元素容器放入其中，如此 - http://jsfiddle.net/Ggbtt/4/

HTML：

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

CSS：

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

Answer 3

如果使用绝对位置，我发现每次都能使用此解决方案

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

垂直对齐与位置：绝对

3 个答案: