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

现代的 CSS Grid 居中法

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

<div id="ind_banner">
  <div class="swiper-wrapper">
    <a class="swiper-slide">
      <img src="/图片地址" alt="图片描述">
      <div class="slide-text">
        <p>第一行文字</p>
        <span>第二行文字</span>
      </div>
    </a>
  </div>
</div>

/* 让 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 */
}
.slide-text p {
  margin: 0 0 10px 0;
  font-size: 2.25rem;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.75);
}

.slide-text span {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.25;
  opacity: 0.9;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

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

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

/* 定义动画：从稍微偏下、透明的状态，平滑过渡到原位 */
@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 配合：

// 等待页面所有资源加载完毕后再执行
window.addEventListener('load', function() {
	// 找到你的轮播图实例（Swiper 初始化后会自动绑定到该 DOM 元素上）
	var mySwiper = document.querySelector('#ind_banner').swiper;

	// 封装一个触发文字动画的函数
	function triggerTextAnimation(swiper) {
		// 获取当前激活的 slide 索引
		var activeIndex = swiper.activeIndex;
		// 安全检查，防止索引异常导致报错
		if (activeIndex === undefined) return;

		// 找到当前激活的 slide 里的文字容器 (.slide-text)
		var activeText = swiper.slides[activeIndex].querySelector('.slide-text');

		// 确保找到了文字元素再执行
		if (activeText) {
			// 1. 先移除动画（重置状态）
			activeText.style.animation = 'none';

			// 2. 强制浏览器重绘（核心关键步骤，没有这一步动画无法重复触发）
			activeText.offsetHeight;

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

	// 如果 Swiper 已经初始化完成，直接触发第一次动画
	if (mySwiper) {
		triggerTextAnimation(mySwiper);

		// 监听每次轮播图切换的事件
		mySwiper.on('slideChange', function() {
			triggerTextAnimation(this);
		});
	}
});