扩展具有绝对定位的子元素的div

Question

有没有选项可以防止子元素的绝对定位并且子元素高度大于父元素时超出父元素？我不想通过overflow: hidden来隐藏溢出部分，我想强制父元素 div.alert 的高度不低于其子元素。如您所见，我正在使用position:absolute和transform:tranlateY(-50%)将

的内容置于中部，与内容长度无关。不幸的是，当内容高于父元素的最小高度时，它会超出父元素。

<div class="alert">
    <span>
        text text text text text text text text text text text text 
    </span>
</div>
<div class="alert">
    <span>
        text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
    </span>
</div>
<div class="alert">
    <span>
        text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
    </span>
</div>

CSS：

body{
    background: #000;
}
.alert{
    position: relative;
    margin: 35px 5px;
    background: #4679BD;
    color: #fff;
    padding: 10px 15px;
    min-height: 40px;
}
span{
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

JS FIDDLE

Thanks in advance.

- LJ Wadowski

Answer 1

绝对定位用于实现与您尝试实现的完全相反的效果。您没有说明它是否必须以及为什么需要使用绝对定位。

您可以轻松地通过在内部元素上使用填充来实现相同的效果：

body{
    background: #000;
}
.alert{
    position: relative;
    margin: 35px 5px;
    background: #4679BD;
    color: #fff;
    padding: 10px 15px;
    min-height: 40px;
}
span{
    padding: 12px 0;
    display: inline-block;
}

<div class="alert">
    <span>
        text text text text text text text text text text text text 
    </span>
</div>
<div class="alert">
    <span>
        text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
    </span>
</div>
<div class="alert">
    <span>
        text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
    </span>
</div>

使用flex方法（注意旧版浏览器）：

http://jsfiddle.net/rnq046wg/4/

---

body{
    background: #000;
}
.alert{
    position: relative;
    margin: 35px 5px;
    background: #4679BD;
    color: #fff;
    padding: 10px 15px;
    min-height: 40px;
    display: flex;
    align-items: center;
}
span{
    display: inline-block;
}

<div class="alert">
    <span>
        text text text text text text text text text text text text 
    </span>
</div>
<div class="alert">
    <span>
        text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
    </span>
</div>
<div class="alert">
    <span>
        text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
    </span>
</div>

- Shomz

---

这个例子被简化以表示我面临的问题。如果有多行文本时，我不想有那么大的填充，该怎么办？ - LJ Wadowski

我明白了，所以问题是当子元素的高度远低于父元素的高度时，在具有最小高度的元素内垂直居中它？ - Shomz

是的，我想我会使用修改版的@ simon解决方案，采用表格布局和垂直对齐方式，尽管我一开始想避免使用这种方法。 - LJ Wadowski

是的，那是一种糟糕的方法...让我尝试使用flex布局来解决。 - Shomz

明白了：http://jsfiddle.net/rnq046wg/5/ 现在没有填充，它仅依赖于父元素的最小高度。 - Shomz

我不知道为什么我没有尝试Flexbox，非常感谢你的帮助！ - LJ Wadowski

Answer 2

如果是静态文本，不需要随时间变化，那么给 min-height 更多的空间来容纳文本。

- xYuri

Answer 3

将固定的padding: 20px 0;分配给它，这样它将始终在中间填充内容，而不是使用绝对位置和其他混乱的东西。

- Vasimkhan

Answer 4

处理这个问题并没有简单的方法，因为position: absolute;是用来“跳出”父元素模型的。

解决这个问题的方法是采用另一种垂直居中的方法：

.alert{
    margin: 35px 5px;
    background: #4679BD;
    color: #fff;
    padding: 10px 15px;
    min-height: 40px;

    display: table;
    table-layout: fixed;
    width: 100%;
    box-sizing: border-box;
}
span{
    display: table-cell;
    vertical-align: middle;
}

小提琴

- smnbbrv