css图片居中

作者：无畏天下发布日期:2025-06-19 浏览:101

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

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

解释说明：

.container 是一个使用 Flexbox 布局的容器，通过 justify-content: center 和 align-items: center 可以让其子元素（如图片）在水平和垂直方向上都居中。
height: 100vh 设置容器的高度为视口高度，确保图片可以在整个页面中居中显示。
img 标签中的样式确保图片不会超出容器的宽度，并且保持其原始的宽高比。

上一篇：css计算

下一篇：css弹性布局