css img 居中

作者：唯憾梦倾城发布日期:2026-02-17 浏览:55

/* 使用 Flexbox 实现 img 居中 */
.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  height: 100vh;           /* 设置容器高度为视口高度 */
}

img {
  max-width: 100%;         /* 确保图片不会超出容器宽度 */
  height: auto;            /* 保持图片的宽高比 */
}

<div class="container">
  <img src="your-image-url.jpg" alt="Example Image">
</div>

解释说明：

.container 使用了 display: flex，并通过 justify-content: center 和 align-items: center 来实现水平和垂直居中。
height: 100vh 确保容器的高度等于视口的高度，这样可以确保在页面上居中显示。
img 的 max-width: 100% 和 height: auto 确保图片在不同尺寸的屏幕上都能自适应并保持宽高比。

上一篇：css position 居中

下一篇：css怎么用