您好,登錄后才能下訂單哦!
小編給大家分享一下CSS實(shí)現(xiàn)居中的方法有哪些,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
要使內(nèi)聯(lián)元素(如鏈接,span
或img
)居中,使用 text-align: center
足夠了。
<div class="desk"> <span class="plate"></span> </div>
.desk { text-align: center; }
對(duì)于多個(gè)內(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; }
對(duì)于多個(gè)內(nèi)聯(lián)的項(xiàng)目,也可以正常工作:
使用網(wǎng)格容器時(shí),圖中的盤(pán)子將根據(jù)其網(wǎng)格區(qū)域居中。 請(qǐng)注意,除非將它們包裹在一個(gè)元素中,否則這將不適用于多個(gè)盤(pán)子。
.desk { display: grid; justify-content: center; }
寬度和高度已知的塊元素可以通過(guò)設(shè)置margin-left:auto
和 margin-right:auto
居中元素。
.plate { width: 120px; height: 120px; margin-left: auto; margin-right: auto; }
對(duì)于多個(gè)塊元素,它們應(yīng)該包裝在一個(gè)元素中,然后讓這個(gè)父元素居中。
.tray { display: flex; margin-left: auto; margin-right: auto; }
對(duì)于 flexbox 同樣也是使用 justify-content:cente
r 來(lái)居中元素:
.desk { display: flex; justify-content: center; }
對(duì)于多個(gè)元素,我們不需要將它們包裹在一個(gè)元素中,flexbox 可以將它們都居中。
通過(guò)絕對(duì)定位,我們可以輕松地通過(guò)CSS transform
將其水平居中。
.plate { position: absolute; left: 50%; transform: translateX(-50%); }
在已知元素寬度的情況下,可以使用負(fù)邊距代替CSS transform。
.plate { position: absolute; left: 50%; margin-left: -60px; }
垂直居中元素最簡(jiǎn)單的方法之一是使用padding
:
padding-top: 24px; padding-bottom: 24px; }
vertical-align
屬性可用于一個(gè)或多個(gè)元素。
在此示例中,叉子和刀子應(yīng)與桌子垂直居中。
.desk { text-align: center; } .plate, .fork, .knife { vertical-align: middle; }
為了對(duì)齊盤(pán)子,叉子和刀,我們可以使用 flexbox:
.desk { display: flex; justify-content: center; align-items: center; }
通過(guò)絕對(duì)定位元素,可以使用 CSS transform
將元素垂直居中:
.plate { position: absolute; top: 50%; transform: translateY(-50%); }
如果知道元素高度,則可以使用負(fù)邊距代替transform
。
.plate { position: absolute; top: 50%; margin-top: -60px; }
使用CSS網(wǎng)格,我們可以使用align-items
將項(xiàng)目垂直于其網(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%); }
通過(guò) justify-content:center
和 align-items:center
就可以將元素垂直水平居中:
.plate { display: flex; justify-content: center; align-items: center; }
通過(guò)place-items
屬性就可以通過(guò),它結(jié)合了justify-content
和align-items
:
.desk { display: grid; place-items: center; }
看完了這篇文章,相信你對(duì)“CSS實(shí)現(xiàn)居中的方法有哪些”有了一定的了解,如果想了解更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。