html/css怎麼設定背景圖片居中

在html/css中，可以利用background-position屬性來設定背景圖片居中，只需要給設定了背景圖片的元素新增「background-position: center;」樣式，即可設定背景圖片在水平和垂直方向居中顯示。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

html/css設定背景圖片居中的步驟

#開啟前端開發工具，新一個html程式碼頁面

在html程式碼頁面上建立一個用來設定背景顏色的div標籤，然後將上class = "bg-img"

#設定背景圖片。建立style標籤，然後在標籤裡面對類別為bg-img設定背景圖片、圖片不重複、寬、高的樣式。樣式代碼：<pre class="brush:php;toolbar:false">.bg-img{ height: 100vh; width: 100%; background-image: url(img/car.jpg); background-repeat: no-repeat; }</pre>

儲存html程式碼，使用瀏覽器打開，這個時候會發現瀏覽器上的背景圖片顯示在左上角。

回到html程式碼頁面，在bg-img類別裡加入

background-position: center

的樣式。

儲存html程式碼後重新刷新瀏覽器，這個時候會發現瀏覽器上的背景圖片已經自動居中了。 ###############推薦教學：《###html影片教學###》、《###CSS影片教學###》###

以上是html/css怎麼設定背景圖片居中的詳細內容。更多資訊請關注PHP中文網其他相關文章！