如何实现图片元素在包裹div容器中的居中对齐？

下面是几种实用的实现方案，按需选择：

方法1：Flexbox布局（首选） #

这是现代前端最常用的居中方案，代码简洁、兼容性好，还能适应各种容器尺寸。
给包裹图片的div添加以下CSS：

.image-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  /* 按需设置容器高度，比如固定值或占满父元素 */
  height: 300px;
}

.image-container img {
  /* 可选：限制图片最大尺寸，防止超出容器 */
  max-width: 100%;
  max-height: 100%;
}

对应的JSX结构：

<div className="image-container">
  <img src="你的图片地址" alt="图片描述" />
</div>

方法2：Grid布局 #

和Flexbox一样高效，适合单元素居中场景，代码更精简：

.image-container {
  display: grid;
  place-items: center; /* 一行代码实现水平+垂直居中 */
  height: 300px;
}

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

JSX结构和上述一致。

方法3：传统兼容方案（适配旧浏览器） #

如果需要兼容IE等老旧浏览器，可以用这种文本对齐+垂直对齐的方式：

.image-container {
  text-align: center; /* 水平居中图片 */
  height: 300px;
  line-height: 300px; /* 行高等于容器高度，实现垂直居中（仅适用于单行元素） */
}

.image-container img {
  vertical-align: middle; /* 配合line-height完成垂直居中 */
  max-width: 100%;
  max-height: 100%;
}

参考截图 #

• 期望效果：
  
• 当前代码与网页状态：
  
  

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