如何讓父母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/