当子元素位置是绝对的且子元素的高度高于父元素时,是否有任何选项可以防止父元素被子元素溢出？我不想通过溢出隐藏溢出的部分：隐藏,我想强制父div.alert高度不低于其子.正如您所看到的,我使用position：absolute和transform：tranlateY(-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>
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%);
}
提前致谢.
解决方法
绝对定位与您尝试实现的完全相反.你从来没有澄清它是否必须是,为什么它必须是绝对的.
使用内部元素上的填充可以轻松实现相同的效果：
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>
http://jsfiddle.net/rnq046wg/4/
使用flex方法(小心使用旧浏览器)：
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>
