jquery - 如何使父 div 的高度缩放到其子项？

Question

我想让消息框始终与 X 垂直居中，即使在消息框中添加了更多内容。我尝试将消息和 X 包装在一个名为 tips 的 div 中，并将消息 div 设置为 top: -50% 但这似乎不起作用。这是 CSS 还是 jQuery 的东西？我也尝试添加溢出:隐藏但没有运气。

CSS

body{
    background: gray;
}

/*    Tips   */
.tooltips{
    width: 600px;
    margin: auto;
}

.tip-icon{
    position: absolute;
    right: 0px;
    height: 40px;
    width: 40px;
}

.tips{
    position: relative;
}

/*    Message    */
.tip-message{
    position: absolute;
    background: #fff;
    padding: 10px 40px;
    top: -50%;
    width: 400px; 
}

.arrow-right {
    position: absolute;
    top: 50%;
    margin-top: -20px;
    right: -50px;
    width: 0; 
    height: 0; 
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;

    border-left: 50px solid #fff;
}

https://jsfiddle.net/z7ou07rL/

Answer 1

我用 jQuery 解决了它

var toolHeight = $('.tip-message').height();

$('.tip-icon').css('top', (toolHeight/2)-1);

https://jsfiddle.net/z7ou07rL/2/