標(biāo)簽來(lái)定義橫幅，如下所示：

接著，在CSS中我們定義一個(gè)樣式來(lái)對(duì)橫幅進(jìn)行居中顯示：

.banner {
text-align: center; /* 水平居中 */
display: flex;
justify-content: center; /* 垂直居中 */
align-items: center; /* 垂直居中 */
width: 100%; /* 寬度設(shè)置為100% */
}

解釋一下上面這段CSS代碼： - text-align: center;用來(lái)使橫幅里面的內(nèi)容水平居中。 - display: flex;用來(lái)設(shè)置橫幅為彈性布局。 - justify-content: center;用來(lái)使橫幅里面的內(nèi)容垂直居中。 - align-items: center;用來(lái)使橫幅里面的內(nèi)容垂直居中。 - width: 100%;用來(lái)設(shè)置橫幅寬度為100%。 通過(guò)上面的樣式設(shè)置，我們實(shí)現(xiàn)了橫幅的居中顯示效果。 需要注意的是，如果你的橫幅是使用背景圖片做為橫幅的話，使用上面的樣式設(shè)置是不起作用的。這時(shí)需要使用background-position屬性進(jìn)行調(diào)整。 以上就是關(guān)于CSS橫幅如何居中顯示的內(nèi)容，希望對(duì)大家有所幫助。