Css 扩展div哪个子位置是绝对位置

当子元素位置为绝对且子元素的高度高于父元素时，是否有任何选项防止子元素溢出父元素？我不想通过

overflow:hidden

隐藏溢出部分，我想强制父级

div.alert

高度不低于其子级。如您所见，我使用“代码>位置：绝对< /代码>和<代码>转换：TrutLeY（-50%）将内容<>代码div >内容独立地放置在中间。不幸的是，当内容高于父级的最小高度时，它会超出父级

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

---

提前感谢。

没有简单的方法来处理这个问题，因为

位置：绝对

用于从父级模型“退出”

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

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

---

如果它是一个静态文本，并且没有随时改变，那么给

最小高度

更多的空间来容纳文本。

绝对定位用于，与您试图实现的目标正好相反。你从来没有澄清它是否必须是绝对的，为什么它必须是绝对的

使用内部元素上的填充可以轻松实现相同的效果：

正文{
背景：#000；
}
.警惕{
位置：相对位置；
利润率：35px 5px；
背景#4679BD；
颜色：#fff；
填充：10px 15px；
最小高度：40px；
}
跨度{
填充：12px0；
显示：内联块；
}

文本文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本

分配补丁

填充：20px 0它总是在中间填充内容，而不是使用绝对位置和所有其他垃圾。
该示例经过简化，以表示我所面临的问题。如果当我有多行文本时，我不想有这么大的填充空间怎么办？我明白了，所以问题是当子元素的高度远低于父元素的高度时，将其垂直居中于最小高度的元素内？是的，我想我会使用修改的@simon解决方案，使用表布局和垂直对齐，我试图避免的是啊，这是一个糟糕的方法。。。让我试试flex布局。我不知道为什么我没有尝试FlexBox，非常感谢您的帮助！
.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;
}