如何讓CSS文件里圖片居中
這篇文章將為大家詳細(xì)講解有關(guān)如何讓CSS文件里圖片居中，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
成都創(chuàng)新互聯(lián)公司專注于海曙企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站開發(fā),商城系統(tǒng)網(wǎng)站開發(fā)。海曙網(wǎng)站建設(shè)公司,為海曙等地區(qū)提供建站服務(wù)。全流程按需定制開發(fā)，專業(yè)設(shè)計，全程項目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)
讓CSS文件里圖片居中的方法：首先創(chuàng)建一個HTML示例文件；然后引入一張背景圖片；最后通過css中的“background-position”屬性實現(xiàn)圖片居中即可。
CSS讓背景圖片居中的方法
其實很簡單，css中的background-position屬性就可以實現(xiàn)背景圖片的水平和垂直方向居中對齊，下面我們通過簡單的代碼示例來介紹background-position屬性是如何設(shè)置背景圖片居中顯示的。
我們先使用background屬性顯示背景圖片：
背景圖片居中
效果圖：
接下來我們看看background-position屬性如何設(shè)置：
1、background-position使用像素設(shè)置背景圖片居中（知道背景圖片的大小）
例子中背景圖片的右下角和demo盒子的中心重合，要想使背景圖片居中，就要讓背景圖片的中心與demo盒子的中心重合，就需要讓背景圖片向下移動高的一半，向右移動寬的一半。因此在css中添加以下代碼，就可實現(xiàn)背景圖片的居中
background-position:100px 70px ; /*寬的一半，高的一半*/
效果圖：
2、background-position使用50%設(shè)置背景圖片居中，很方便
background-position:50% 50% ;
3、background-position使用center設(shè)置背景圖片居中，很方便。（第2個center可以省略）
background-position:center center;
上述background-position的三種設(shè)置方法都可以實現(xiàn)背景圖片的居中，background-position屬性的第一個值設(shè)置水平位置，第二個值設(shè)置垂直位置；大家可以視情況而決定使用哪種方法。希望能對大家的學(xué)習(xí)有所幫助。
關(guān)于“如何讓CSS文件里圖片居中”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
當(dāng)前名稱：如何讓CSS文件里圖片居中
網(wǎng)頁路徑：
http://weahome.cn/article/gdsieg.html
重慶分公司
重慶分公司
