CSS Grid 居中法：让图片和文字“重叠居中”在同一个网格里

现代的 CSS Grid 居中法

一种非常简洁的现代 CSS 布局技巧：利用 CSS Grid 的特性，可以让图片和文字直接“重叠”在同一个网格里，并天然居中。

/* 让 slide 变成 grid 容器 */
.swiper-slide {
    display: grid;
  /* 直接让内部所有子元素（图片和文字）完美居中 */
    place-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  /* 关键：让图片和文字都挤在同一个网格区域，实现重叠 */
    grid-area: 1 / 1;
}

.slide-text {
  /* 同样挤在同一个网格区域 */
    grid-area: 1 / 1;
    z-index: 10;
    color: #fff;
  /* 毛玻璃或普通半透明背景 */
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 20px 30px;
    border-radius: 16px;
    max-width: 80%;
  /* 注意：使用 Grid 居中法时，不需要写 position: absolute */
}

优雅的入场动画（增加动态呼吸感）

让文字在图片切换时，有一个轻轻向上浮动并淡入的过程，整个轮播图会显得非常灵动。

/* 定义动画：从稍微偏下、透明的状态，平滑过渡到原位 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
 /* 只需要控制Y轴上下移动 */
    }

    to {
        opacity: 1;
        transform: translateY(0);
 /* 回到 Grid 居中后的原位 */
    }
}

.slide-text {
  /* 保持 Grid 布局的核心代码 */
    grid-area: 1 / 1;
    z-index: 10;
  /* 绑定动画：持续0.8秒，缓动效果，动画结束后保持最终状态 */
    animation: fadeInUp 0.8s ease-out forwards;
  /* 保留你的毛玻璃背景样式 */
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 20px 30px;
    border-radius: 16px;
    max-width: 80%;
    color: #fff;
}

进阶小技巧：让动画在每次轮播时都触发

上面的写法，动画通常只在网页刚加载时播放一次。如果你希望是轮播图每切换一张图片，文字就重新播放一次入场动画，可以给 Swiper 加一点简单的 JS 配合：

// 假设你的 Swiper 实例叫 mySwiper
mySwiper.on('slideChange', function() {
	// 找到当前激活的 slide 里的文字容器
	const activeText = this.slides[this.activeIndex].querySelector('.slide-text');

	// 先移除动画（重置状态）
	activeText.style.animation = 'none';

	// 强制浏览器重绘（这一步很关键，否则动画不会重新触发）
	activeText.offsetHeight;

	// 重新加上动画
	activeText.style.animation = 'fadeInUp 0.8s ease-out forwards';
});