不同尺寸图片在Div中垂直居中的通用解决方案

嘿，这个问题我太熟了！要让各种尺寸的图片在对应的Div里完美居中（还得保证图片不拉伸变形），其实用现代CSS就能轻松搞定，给你几个通用方案，挑个适合你项目的就行：

1. Flexbox 方案（最推荐，现代浏览器友好） #

这是目前最简洁且兼容性最好的方案，几乎所有现代浏览器都支持。核心是利用Flexbox的对齐属性，再配合object-fit保证图片比例。

/* 父容器样式 */
.image-container {
  width: 400px; /* 你的容器宽度，也可以用百分比 */
  height: 300px; /* 你的容器高度，必须有明确高度才能垂直居中 */
  border: 1px solid #eee; /* 可选，方便查看容器范围 */
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

/* 图片样式 */
.image-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* 关键：保持图片原始比例，完整显示在容器内，不拉伸不裁剪 */
}

说明： #

• object-fit: contain会让图片按比例缩放，完整展示在容器中，容器空白区域会留空；如果想让图片填满容器（允许裁剪边缘），可以换成object-fit: cover，但你要求不可变形，contain更符合需求。
• 如果容器高度是百分比，记得给父元素也设置明确高度（比如body, html { height: 100%; }），否则垂直居中会失效。

2. Grid 布局方案（更简洁的写法） #

Grid布局和Flexbox一样强大，代码更短，适合喜欢极简写法的场景：

.image-container {
  width: 400px;
  height: 300px;
  border: 1px solid #eee;
  display: grid;
  place-items: center; /* 一句话搞定水平+垂直居中 */
}

.image-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

这个方案的效果和Flexbox完全一致，只是写法更简洁，兼容性和Flexbox差不多，现代浏览器都支持。

3. 兼容旧浏览器方案（比如 IE11） #

如果你的项目需要兼容IE这类老浏览器，用Table布局的方式更稳妥：

.image-container {
  width: 400px;
  height: 300px;
  border: 1px solid #eee;
  display: table;
}

/* 需要额外套一个子容器 */
.image-wrapper {
  display: table-cell;
  vertical-align: middle; /* 垂直居中 */
  text-align: center; /* 水平居中 */
}

.image-wrapper img {
  max-width: 100%;
  max-height: 100%;
  /* IE不支持object-fit，所以用max-width/max-height保证不超出容器，比例自然保持 */
}

说明： #

• IE不支持object-fit，但只要设置max-width和max-height为100%，图片就会按比例缩放，不会超出容器，也不会变形。
• 缺点是需要多嵌套一层div作为image-wrapper。

4. Position + Transform 方案（适合需要定位的场景） #

如果你的容器已经用了相对定位，这个方案也很实用：

.image-container {
  width: 400px;
  height: 300px;
  border: 1px solid #eee;
  position: relative; /* 父容器设为相对定位 */
}

.image-container img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 向左向上移动自身的50%，实现居中 */
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

说明： #

• 这个方案不需要额外嵌套元素，适合容器已经有定位需求的场景。
• 同样，容器需要有明确的宽高。

总结 #

• 如果你不需要兼容IE，优先选Flexbox或Grid，代码简洁，维护方便；
• 要兼容IE，就用Table布局；
• 容器有定位需求的话，用Position + Transform。

不管选哪个方案，核心都是：给容器明确的宽高 + 限制图片的最大宽高不超过容器 + 保证图片比例不变（object-fit或仅靠max-width/max-height）。

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