Flexbox 和 CSS 定位中圖像上的文字居中
將文字置於圖像上居中是常見的佈局要求。雖然 Flexbox 提供了強大的對齊選項，但您也可以使用 CSS 定位屬性來實現此效果。
使用絕對定位
使用絕對定位讓文字在影像上居中：
body {
position: relative;
}
...
.text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-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 和 CSS 定位使文字在圖像上居中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
