怎樣使用html/css設(shè)置背景圖片居中，針對這個(gè)問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。

10年積累的成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先制作網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有淶水免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

在html/css中，可以利用background-position屬性來設(shè)置背景圖片居中，只需要給設(shè)置了背景圖片的元素添加“background-position: center;”樣式，即可設(shè)置背景圖片在水平和垂直方向居中顯示。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

html/css設(shè)置背景圖片居中的步驟

打開前端開發(fā)工具，新建一個(gè)html代碼頁面

在html代碼頁面上創(chuàng)建一個(gè)用于設(shè)置背景顏色的div標(biāo)簽，然后給這個(gè)標(biāo)簽添加上class = "bg-img"

設(shè)置背景圖片。創(chuàng)建style標(biāo)簽，然后在標(biāo)簽里面對類為bg-img設(shè)置背景圖片、圖片不重復(fù)、寬、高的樣式。樣式代碼：

.bg-img{
height: 100vh;
width: 100%;
background-image: url(img/car.jpg);
background-repeat: no-repeat;
}

保存html代碼，使用瀏覽器打開，這個(gè)時(shí)候會(huì)發(fā)現(xiàn)瀏覽器上的背景圖片顯示在左上角。

回到html代碼頁面，在bg-img類里添加background-position: center的樣式。

保存html代碼后重新刷新瀏覽器，這個(gè)時(shí)候會(huì)發(fā)現(xiàn)瀏覽器上的背景圖片已經(jīng)自動(dòng)居中了。

關(guān)于怎樣使用html/css設(shè)置背景圖片居中問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識。