将 div 垂直居中放置在另一个没有固定高度的 div 内

@text: black;
@bkg: white;
@accent: rgba(75, 75, 75);

.wrapper {
    padding: 2rem 0;
}

.wrapper, .wrapper * {
    white-space: pre-line;
}

.bubble {
    background: gray;
    min-height: 225px;
    padding:10px; 
    max-height:auto; 
    width: 60%;
    border-radius: 10px;
    color: black; 
      position: relative;
    text-align:center;
    display: table;
    
}

.bubble:after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-left-color: gray;
    border-right: 0;
    border-bottom: 0;
    margin-top: -10px;
    margin-right: -20px;
}

.bubble span {
    display: table-cell;
    vertical-align: middle;
}

.image {
    min-height:10px;
    position: absolute;
    right: 0;
    width: 35%;
}

.image img {
    max-width: 100%;
}

<div class="wrapper">
  <div class="image">
    <img src="https://images.squidge.org/images/2024/04/09/biscuit_portrait.png" class="bbcode_image" loading="lazy">
  </div>
  <div class="bubble">
    <span style="font-size:10pt">
            elit enim in ex. Cras auctor lorem id lobortis feugiat. Maecenas egestas diam molestie ex tincidunt, eget tristique lectus sollicitudin. Aliquam quis risus facilisis nulla placerat ornare bibendum porta metus. Nulla placerat efficitur tincidunt. Nunc mattis neque non lectus interdum posuere. Curabitur id neque congue nibh condimentum molestie nec et mauris. Vivamus sed quam vitae leo varius sollicitudin et eget metus. Cras vestibulum ultrices viverra. Fusce accumsan scelerisque sapien, id pharetra massa sagittis eu. Nulla nec lectus accumsan, ultricies purus sagittis, consectetur lorem. Nam suscipit diam ac mauris ultricies rutrum. Sed auctor, augue eu porttitor suscipit, urna leo blandit ante, ac commodo ante augue ac odio. Vestibulum faucibus imperdiet purus, id gravida nisl rhoncus vitae. Etiam rhoncus dictum sem, nec imperdiet purus consectetur nec. Mauris sed mi scelerisque, consectetur quam a, malesuada orci.elit enim in ex. Cras auctor lorem id lobortis feugiat. Maecenas egestas diam molestie ex tincidunt, eget tristique lectus sollicitudin. Aliquam quis risus facilisis nulla placerat ornare bibendum porta metus. Nulla placerat efficitur tincidunt. Nunc mattis neque non lectus interdum posuere. Curabitur id neque congue nibh condimentum molestie nec et mauris. Vivamus sed quam vitae leo varius sollicitudin et eget metus. Cras vestibulum ultrices viverra. Fusce accumsan scelerisque sapien, id pharetra massa sagittis eu. Nulla nec lectus accumsan, ultricies purus sagittis, consectetur lorem. Nam suscipit diam ac mauris ultricies rutrum. Sed auctor, augue eu porttitor suscipit, urna leo blandit ante, ac commodo ante augue ac odio. Vestibulum faucibus imperdiet purus, id gravida nisl rhoncus vitae. Etiam rhoncus dictum sem, nec imperdiet purus consectetur nec. Mauris sed mi scelerisque, consectetur quam a, malesuada orci.

Nunc arcu justo, tincidunt sit amet augue et, consectetur vehicula enim. In hac habitasse platea dictumst. Cras sed posuere metus. Cras feugiat, ex sit amet pretium vestibulum, neque quam fringilla augue, sed efficitur ligula quam non diam. Phasellus pellentesque euismod nunc sed mollis. Sed faucibus leo non eros bibendum, cursus gravida lacus scelerisque. Vivamus at congue felis, vitae aliquet leo. Duis at orci sed arcu condimentum suscipit. Vestibulum laoreet enim id metus ultrices aliquet eget a nunc. 
    </span>
  </div>
</div>