css 图片居中

作者：你不爱我就滚。发布日期:2026-02-07 浏览:87

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

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

解释说明：

.container 是包含图片的父元素，使用 display: flex 将其转换为弹性盒子布局。
justify-content: center 和 align-items: center 分别用于水平和垂直居中图片。
height: 100vh 设置容器的高度为视口高度，确保整个视口内都可以居中显示图片。
img 标签中的样式确保图片在不同屏幕尺寸下能够自适应并保持宽高比。

上一篇：css样式表

下一篇：css学习