如何实现两个max-width200px的左右Div等高且内容水平垂直居中？

嘿，这个需求用CSS Flexbox就能轻松搞定，代码简洁还能完美适配你说的两种场景，我给你一步步拆解实现：

核心思路 #

利用Flexbox的特性让父容器控制子元素等高，同时每个子容器内部再用Flex来实现内容的水平+垂直居中，不管内容高度如何变化都能自动适配。

完整代码示例 #

HTML结构 #

<div class="parent">
  <div class="text-container">
    <p>这里是文本内容，可能很短，也可能很长很长，比如多换行的情况，测试一下当文本高度超过图片时的垂直居中效果。</p>
  </div>
  <div class="image-container">
    <img src="your-image-url.jpg" alt="示例图片">
  </div>
</div>

CSS样式 #

/* 父容器：控制子元素横向排列并等高 */
.parent {
  display: flex;
  gap: 1.5rem; /* 可选：给两个子容器添加间距，视觉更友好 */
  padding: 1rem;
}

/* 子容器通用样式：限制宽度+内部内容居中 */
.text-container, .image-container {
  max-width: 200px;
  display: flex;
  flex-direction: column; /* 让内容垂直方向排列 */
  justify-content: center; /* 垂直居中内容 */
  align-items: center; /* 水平居中内容 */
  border: 1px solid #eee; /* 可选：加边框方便查看容器范围 */
}

/* 文本容器细节处理 */
.text-container p {
  margin: 0; /* 清除p标签默认上下边距，避免影响居中效果 */
  text-align: center; /* 多行文本时也保持水平居中 */
  padding: 0.5rem;
}

/* 图片容器细节处理 */
.image-container img {
  max-width: 100%; /* 图片不超出容器宽度 */
  height: auto; /* 保持图片原有比例 */
  display: block; /* 清除图片默认行内元素的底部间隙 */
}

关键特性说明 #

• 等高子容器：父容器的display: flex会默认给子元素设置align-items: stretch，这会让所有子容器的高度自动匹配父容器的高度（也就是最高子元素的高度），实现二者始终等高。
• 内容自适应居中：每个子容器内部用flex-direction: column+justify-content: center，不管内部文本/图片的高度是多少，都会在容器内垂直居中；align-items: center保证内容水平居中。
• 响应式适配：图片设置max-width:100%会自动适配容器宽度，不会超出200px的限制，同时保持比例。

你可以测试两种场景：

• 当图片高度大于文本时：文本容器会被拉伸到和图片容器一样高，文本在容器内垂直居中。
• 当文本高度大于图片时：图片容器会被拉伸到和文本容器一样高，图片在容器内垂直居中。

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