小編給大家分享一下CSS實現(xiàn)居中的方法有哪些,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
成都創(chuàng)新互聯(lián)主要從事網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)阿拉善盟,十余年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):028-86922220要使內(nèi)聯(lián)元素(如鏈接,span
或img
)居中,使用text-align: center
足夠了。
<div class="desk"> <span class="plate"></span> </div>
.desk { text-align: center; }
對于多個內(nèi)聯(lián)元素,也可以使用text-align:center
:
<div class="desk"> <span class="plate"></span> <span class="plate"></span> </div>
.desk { text-align: center; }
使用 flexbox 也可以快速居中元素:
.desk { display: flex; justify-content: center; }
對于多個內(nèi)聯(lián)的項目,也可以正常工作:
使用網(wǎng)格容器時,圖中的盤子將根據(jù)其網(wǎng)格區(qū)域居中。 請注意,除非將它們包裹在一個元素中,否則這將不適用于多個盤子。
.desk { display: grid; justify-content: center; }
寬度和高度已知的塊元素可以通過設(shè)置margin-left:auto
和margin-right:auto
居中元素。
.plate { width: 120px; height: 120px; margin-left: auto; margin-right: auto; }
對于多個塊元素,它們應(yīng)該包裝在一個元素中,然后讓這個父元素居中。
.tray { display: flex; margin-left: auto; margin-right: auto; }
對于 flexbox 同樣也是使用 justify-content:cente
r 來居中元素:
.desk { display: flex; justify-content: center; }
對于多個元素,我們不需要將它們包裹在一個元素中,flexbox 可以將它們都居中。
通過絕對定位,我們可以輕松地通過CSStransform
將其水平居中。
.plate { position: absolute; left: 50%; transform: translateX(-50%); }
在已知元素寬度的情況下,可以使用負邊距代替CSS transform。
.plate { position: absolute; left: 50%; margin-left: -60px; }
垂直居中元素最簡單的方法之一是使用padding
:
padding-top: 24px; padding-bottom: 24px; }
vertical-align
屬性可用于一個或多個元素。
在此示例中,叉子和刀子應(yīng)與桌子垂直居中。
.desk { text-align: center; } .plate, .fork, .knife { vertical-align: middle; }
為了對齊盤子,叉子和刀,我們可以使用 flexbox:
.desk { display: flex; justify-content: center; align-items: center; }
通過絕對定位元素,可以使用 CSStransform
將元素垂直居中:
.plate { position: absolute; top: 50%; transform: translateY(-50%); }
如果知道元素高度,則可以使用負邊距代替transform
。
.plate { position: absolute; top: 50%; margin-top: -60px; }
使用CSS網(wǎng)格,我們可以使用align-items
將項目垂直于其網(wǎng)格區(qū)域居中。
.desk { display: grid; align-items: center; }
.plate { text-align: center; padding-top: 24px; padding-bottom: 24px; }
.plate { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
通過justify-content:center
和align-items:center
就可以將元素垂直水平居中:
.plate { display: flex; justify-content: center; align-items: center; }
通過place-items
屬性就可以通過,它結(jié)合了justify-content
和align-items
:
.desk { display: grid; place-items: center; }
看完了這篇文章,相信你對“CSS實現(xiàn)居中的方法有哪些”有了一定的了解,如果想了解更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!
分享標題:CSS實現(xiàn)居中的方法有哪些-創(chuàng)新互聯(lián)
標題URL:http://www.muchs.cn/article18/pccdp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供企業(yè)建站、外貿(mào)建站、品牌網(wǎng)站制作、網(wǎng)站策劃、定制開發(fā)、微信小程序
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)