css 图片垂直居中

作者：旭旭移日发布日期:2025-04-19 浏览:43

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

/* 示例 HTML 结构 */
/*
<div class="container">
  <img src="your-image.jpg" alt="示例图片">
</div>
*/

解释说明：

.container 是一个包含图片的父容器。
display: flex; 将容器设置为 Flexbox 布局。
justify-content: center; 使子元素（图片）在水平方向上居中。
align-items: center; 使子元素（图片）在垂直方向上居中。
height: 100vh; 设置容器的高度为视口高度，确保容器有足够的高度来实现垂直居中效果。

这样可以确保图片在其父容器中既水平又垂直居中。

上一篇：css 一行省略号

下一篇：css currentcolor