小編給大家分享一下css怎樣實現(xiàn)圖片水平垂直居中，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比恒山網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式恒山網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋恒山地區(qū)。費用合理售后完善，十年實體公司更值得信賴。

1、text-align: center實現(xiàn)圖片水平居中

text-align一般用于文本的水平居中，也可以用于圖片，代碼如下：

CSS部分：

HTML部分：

2、line-height和text-align: center 實現(xiàn)圖片的水平垂直居中

設(shè)置line-height的值等于height，可以實現(xiàn)垂直居中，text-align: center可以實現(xiàn)水平居中。HTML部分一樣，CSS代碼如下：

3、display: table和display: table-cell實現(xiàn)圖片水平垂直居中

利用table方法設(shè)置display: table，display: table-cell，但是這種方法并不兼容IE6/IE7，如果你不需要支持IE67可以使用這種方法

css樣式直接寫在標(biāo)簽里面，代碼如下：

4、position實現(xiàn)圖片水平垂直居中

定位方法：在父盒子中設(shè)置相對定位，在子盒子中設(shè)置絕對定位，即所謂的父相對子絕對。設(shè)置圖片位置左邊為50%，上邊為50%，（注意：這樣并沒有垂直居中），還需要設(shè)置margin-left為圖片長度的一半，margin-top為圖片高度的一半。HTML部分一樣，CSS代碼如下;

5、背景background實現(xiàn)圖片水平垂直居中

利用background: url no-repeat center center 實現(xiàn)圖片的水平垂直居中

div{
width: 400px;
height:200px; 
border: green solid 1px;
background: url(img/logo.png) no-repeat center center ;
}

以上是“css怎樣實現(xiàn)圖片水平垂直居中”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享標(biāo)題：css怎樣實現(xiàn)圖片水平垂直居中-創(chuàng)新互聯(lián)
轉(zhuǎn)載源于：http://weahome.cn/article/coescj.html