溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

實現(xiàn)css文字垂直居中的方法有哪些

發(fā)布時間:2020-09-26 15:13:54 來源:億速云 閱讀:172 作者:小新 欄目:web開發(fā)

小編給大家分享一下實現(xiàn)css文字垂直居中的方法有哪些,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!

現(xiàn)在使用css進行文字的水平和垂直居中,并不是一件容易的事情,有些新手在使用css方法去實現(xiàn)css居中,在瀏覽器并沒有什么效果,可能是由于兼容的問題或者是一些非主流的瀏覽器。

1.使用絕對定位和margin: auto相結(jié)合

margin: auto屬性, margin后面是有四個屬性的,分別是上下左右,只要我們把margin設置成auto,就可以是先水平居中了。

2.使用絕對定位,利用transform屬性實現(xiàn)

transform的默認值是none,效果是出現(xiàn)轉(zhuǎn)化,繼承值no,使用transform唯一好處就是不需要知道元素的尺寸,transform的偏移的百分比就是相對于該元素尺寸。

3.使用絕對定位中的div進行居中,把div中的top設置成50%,margin-top設置成負值px,不需要去設置嵌套標簽,更合適所有瀏覽器,但是前提要知道要居中的尺寸。

4.padding屬性可以實現(xiàn)元素的居中

padding屬性其實就是設置內(nèi)邊框的距離,并且設置上下左右邊距的寬度,這個方法實比較簡單的,只要我們設置相等的邊距,就會出現(xiàn)元素的垂直居中。

以上是實現(xiàn)css文字垂直居中的方法有哪些的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業(yè)資訊頻道!

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。

css
AI