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

使用 Flexbox 將文字在圖像上居中

問題：我們如何使用 Flexbox將文字在圖像上居中對齊?

替代方案解決方案：

雖然可以選擇使用 Flexbox，但沒有必要實現文字在圖像上居中。 CSS 位置屬性提供了更直接的解決方案：

.height-100vh {
    height: 100vh;
    position: relative;
}

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

1. 建立 CSS 容器：對於這兩種方法，都需要一個 CSS 容器（height-100vh）來定位內容。
2. 絕對定位：文字元素絕對定位在容器內。
3. 水平和垂直對齊方式：左：50%；頂部：50%；將文字元素水平和垂直居中。
4. 精確居中：變換屬性透過在兩個軸上將元素平移 50% 來微調位置。

Flexbox解決方案：

如果首選Flexbox，以下是如何將文字置中image:

.height-100vh {
    height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
}

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

Flex容器：容器（高度-100vh）設定為具有垂直Flex 方向的Flex 容器。
1. 文字定位：與之前一樣，文字元素絕對定位並居中於left: 50%, top: 50%, 和transform: translate(-50%, -50%).
2. 主軸對齊方式：align-items: center;將內容在Flex 容器內垂直置中。

雖然這兩種方法都有效，但 CSS 定位方法更簡單，並且在圖像上對齊文字時無需使用 Flexbox。

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