无固定高度父div内子div垂直居中及气泡框尾部与图片对齐

直接调整CSS布局，用Flexbox统一控制容器内元素的垂直对齐，就能解决气泡高度、图片尺寸变化时的居中问题，具体修改如下：

核心修改点 #

• 给.wrapper添加Flexbox属性，让气泡和图片自动垂直居中
• 优化气泡尾部箭头的居中方式，改用transform更精准
• 调整图片容器的布局，用Flexbox保证图片在容器内居中

修改后的完整CSS代码 #

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

.wrapper {
    padding: 2rem 0;
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem; /* 可选，给气泡和图片之间加间距 */
}

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

.bubble {
    background: gray;
    min-height: 225px;
    padding:10px; 
    width: 60%;
    border-radius: 10px;
    color: black; 
    position: relative;
    text-align:center;
    display: flex;
    align-items: center; /* 让气泡内文字垂直居中 */
}

.bubble:after {
    content: '';
    position: absolute;
    right: -20px; /* 直接定位到气泡右侧外部 */
    top: 50%;
    transform: translateY(-50%); /* 精准垂直居中，不受箭头尺寸影响 */
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-left-color: gray;
    border-right: 0;
    border-bottom: 0;
}

.image {
    width: 35%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image img {
    max-width: 100%;
    height: auto; /* 保持图片比例 */
}

HTML结构保持不变 #

<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>

效果说明 #

• .wrapper用Flexbox的align-items: center，让气泡和图片始终保持在容器垂直中线上，气泡尾部箭头基于气泡自身居中，自然就和图片对齐了
• 气泡内部用Flexbox实现文字垂直居中，替代原来的table布局更简洁
• 图片容器用Flexbox保证图片在35%宽度内居中显示，保持比例不拉伸

内容的提问来源于stack exchange，提问作者alex