如何使用 Flexbox 和 CSS 定位使文字在圖像上居中？

Flexbox 和 CSS 定位中圖像上的文字居中

將文字置於圖像上居中是常見的佈局要求。雖然 Flexbox 提供了強大的對齊選項，但您也可以使用 CSS 定位屬性來實現此效果。

使用絕對定位

使用絕對定位讓文字在影像上居中：

body {
  position: relative;
}
...
.text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

• 為body 設定靜態位置值，為絕對值建立一個定位的祖先定位。
• 絕對定位文字元素。
• 文本左水平居中：50%；並將其與頂部垂直居中：50%；。
• 使用變換透過平移其寬度和高度的一半來微調居中。

使用Flexbox

或者，Flexbox 可用於圖像和文字定位：

body {
  margin: 0px;
}
...
.height-100vh {
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}
...
.text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
}
.center-aligned {
  display: flex;
  align-items: center;
  justify-content: center;
}

• 將圖像和文字元素元素包裹在具有高度屬性的Flexbox容器中。
• 設定align-items: center;並調整內容：中心；在容器內垂直和水平對齊項目。
• 將文字元素絕對定位在容器內並根據需要設定其樣式。

以上是如何使用 Flexbox 和 CSS 定位使文字在圖像上居中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！