如何使div内的图片居中且避免溢出容器？

嘿，我懂你碰到的麻烦了——用margin-top: 50%的时候，这个百分比是按父元素的宽度来计算的，不是高度，难怪图片容易超出容器范围。下面给你几个实用的方案，都能让图片稳稳待在div里，还能实现完美居中：

方案1：Flexbox布局（最推荐，现代浏览器全支持） #

这是最简单灵活的方式，给父div加几个flex属性，图片自动居中，还能保证不溢出：

.parent-div {
  display: flex;
  justify-content: center; /* 水平方向居中 */
  align-items: center; /* 垂直方向居中 */
  overflow: hidden; /* 可选：如果图片比容器大，裁剪超出部分 */
  /* 记得给父div设置宽高，比如： */
  width: 400px;
  height: 300px;
}

.parent-div img {
  max-width: 100%; /* 图片宽度不超容器 */
  max-height: 100%; /* 图片高度不超容器 */
  object-fit: contain; /* 可选：保持图片比例，完整显示；要填充容器就用cover */
}

Flexbox的优势在于，不管容器和图片尺寸怎么变，居中效果都不会崩，代码还特别简洁。

方案2：Grid布局（和Flexbox一样省心） #

Grid也是现代布局的好选择，实现起来同样直观：

.parent-div {
  display: grid;
  place-items: center; /* 一句话搞定水平+垂直居中 */
  overflow: hidden;
  width: 400px;
  height: 300px;
}

.parent-div img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

place-items: center直接双方向居中，新手也能快速上手。

方案3：定位+transform（兼容旧浏览器） #

如果需要兼容IE这类老浏览器，绝对定位配合transform是靠谱的选择：

.parent-div {
  position: relative;
  overflow: hidden;
  width: 400px;
  height: 300px;
}

.parent-div img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 基于自身尺寸偏移，完美居中 */
  max-width: 100%;
  max-height: 100%;
}

这里的transform: translate(-50%, -50%)是关键——它是按图片自身的宽高计算偏移量，不是父元素的宽度，所以不会出现溢出问题。

额外小提示 #

• 一定要给父div设置明确的宽高，或者让它通过内容/其他方式获得高度，不然居中效果会失效。
• 如果想让图片填满容器还保持比例，把object-fit: contain换成object-fit: cover，超出部分会被裁剪；不需要保持比例的话，直接用width:100%; height:100%;就行。

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