图片居中css

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

/* 或者使用文本对齐方式实现水平居中，结合 margin 实现垂直居中 */
.center-image-alt {
    text-align: center;
    height: 100vh;
    line-height: 100vh; /* 设置行高等于容器高度 */
}

img {
    vertical-align: middle; /* 垂直居中 */
    max-height: 100%; /* 确保图片不会超出容器 */
}

解释说明：

1. Flexbox 方法：

   • display: flex;：将容器设置为弹性盒子布局。
   • justify-content: center;：水平居中。
   • align-items: center;：垂直居中。
   • height: 100vh;：使容器高度等于视口高度。

2. 文本对齐和 Margin 方法：

   • text-align: center;：水平居中图片。
   • line-height: 100vh;：通过设置行高与容器高度相同来实现垂直居中。
   • vertical-align: middle;：确保图片在行内元素中垂直居中。
   • max-height: 100%;：防止图片超出容器。