Question

当子元素位置是绝对的且子元素的高度高于父元素时，是否有任何选项可以防止子元素被子元素溢出？我不想隐藏overflow: hidden的溢出部分，我想强制父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%);
}

JS FIDDLE

提前致谢。

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>

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>

Answer 2

没有简单的方法可以解决这个问题，因为position: absolute;旨在“走出去”＃34;来自父母的模特。

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

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

Fiddle

Answer 3

如果它是一个不时更改的静态文本，那么请给min-height更多空间来包含文本。

Answer 4

分配修复padding: 20px 0;它将始终在中间填充内容，而不是使用绝对位置和所有其他垃圾。

儿童定位的扩展div是绝对的

4 个答案:

使用flex方法（小心使用旧浏览器）：