一、使用text-align屬性水平居中
text-align屬性可以控制文本在其容器中的水平位置，取值可以為left、right、center或justify。其中，center即為居中。此時，容器中的文本會以容器中心為基準左右居中顯示。
.container {
text-align: center;
}
二、使用line-height屬性垂直居中
line-height屬性可以控制文本行與行之間的距離，還可以用於實現文本的垂直居中。當line-height的值等於容器高度時，文本就會在容器中垂直居中顯示。
.container {
height: 200px;
line-height: 200px;
}
三、使用position屬性和transform屬性定位
如果要將文本放置在頁面的任意位置，可以使用position和transform屬性。首先，將文本的position屬性設置為absolute，然後使用top和left屬性或者transform屬性來定位。
.container {
position: relative;
}
.text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
四、使用flex布局實現靈活控制位置
flex布局可以實現對文本的水平和垂直居中，同時還可以根據需求控制文本的位置和間距。
.container {
display: flex;
justify-content: center;
align-items: center;
}
.text {
margin: 20px;
}
五、使用grid布局實現靈活控制位置
grid布局也可以實現對文本的水平和垂直居中，並且可以更加自由地控制文本的位置和大小。
.container {
display: grid;
place-items: center;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
.text {
grid-column: 2 / 3;
grid-row: 1 / 2;
justify-self: end;
align-self: start;
}
六、結語
以上是幾種常見的控制文本在網頁上位置的方法，可以根據實際需求選擇適合自己的方法。
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/185707.html
微信掃一掃 
支付寶掃一掃 