您想要將圖像作為背景，并根據寬度和高度設置其樣式。然后你想要一個文本或內容容器position: absolute;，這將導致你的文本覆蓋圖像。從那里開始設置display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;，這將使您的文本位于圖像的中心。

確保它包含在容器中，position: relative以便絕對定位的元素到達容器的邊界而不是頁面的邊界。

<div class="container">
  <img class="image-class"/>
  <div class="text-container">
    your text elements here  </div></div>.container {
  position: relative;
}

.image-class {
  width: 100%;
  height: auto;
}

.text-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

這應該會讓你接近你正在尋找的東西。我提供了一個帶有快速示例的 codepen：https ://codepen.io/sean-mooney/pen/ZEGNVrw

希望有幫助！

編輯

上面的示例演示了如何在圖像上對齊文本，但是在輪播中這可能有點不同。概念保持不變，但實施可能很棘手。我添加了另一個代碼筆，演示如何在輪播中使用該示例：

https://codepen.io/sean-mooney/pen/jOPogrY