如何让父母div的高度缩放到其子女？

Question

我希望使消息框始终与X垂直居中，即使更多内容添加到消息框中。我尝试在一个叫做提示的div中包含消息和X，并将顶部的消息div设置为-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/