想要讓文字顯示在頁面中心通常有兩個方法:一是居中對齊,二是使用絕對定位。下面我們介紹如何使用css實現這一效果。
.center-align { text-align: center; /*水平居中對齊*/ line-height: 100vh; /*垂直居中對齊,vh是視窗高度的百分比單位,100vh表示整個視窗高度*/ }
上述代碼中,我們使用了text-align屬性將文字水平居中對齊,同時使用line-height將文字垂直居中對齊。其中line-height的值為視窗高度的百分比,這樣做是因為只有當容器高度固定或者為100%時,才能使用該方法實現垂直居中。
.absolute-center { position: absolute; /*絕對定位*/ top: 50%; /*向下偏移50%*/ left: 50%; /*向右位移50%*/ transform: translate(-50%, -50%); /*反向偏移50%*/ }
上述代碼中,我們使用了position定位屬性將文字元素進行絕對定位,然后使用top和left偏移屬性將元素移動到容器的中心位置。然而,這樣會使元素從容器的左上角開始定位,因此在transform屬性中需要使用translate函數將元素向左上角方向偏移回原位。
以上兩種方式都可以讓文字元素水平垂直居中顯示,具體使用哪一種取決于頁面的特定需求。
上一篇mysql怎么走索引查詢
下一篇css是文字豎排排列