厲害了我的哥,css圖片居中原來有這么多種方法

圖片的居中顯示 css 有很多方法，但在很多情況下有的方法無效，這是件很頭疼的事情，比如

一般設(shè)置圖片屬性

?

?

水平居中，但這個方法經(jīng)常無效，

CSS

但其實 CSS 圖片居中有多種不同的情況，也有多種不同的解決方法，具體方法如下所示：

圖片居中又分為水平居中和垂直居中

提示：在你開始閱讀以下內(nèi)容之前，你可以先了解CSS圖片的基礎(chǔ)內(nèi)容。

一、水平居中：

1、單獨文字垂直居中我們只需要設(shè)置 CSS 樣式line-height屬性即可。

2、文字與圖片同排，在設(shè)置div高度同時再對此 CSS 樣式的圖片“img”樣式設(shè)置?vertical-align:middle?垂直居中屬性，如:? img{vertical-align:middle;}? 。

3 不確定寬度的塊級元素設(shè)置水平居中的方法

（1）是使用? table? 作為容器的方法來實現(xiàn)。當(dāng)然不大推薦使用這種方法，因為添加了無意義的標(biāo)簽。這里就稍微介紹一下吧。?Table? 標(biāo)簽本身并不是塊級元素，當(dāng)我們不設(shè)置?table?的寬度的話，他里面的寬度是由他內(nèi)部元素的寬度撐起來的。但即使我們沒有設(shè)置?table?的寬度，直接設(shè)置?table?的外邊距?margin：0 auto;?就可以實現(xiàn)水平居中了!這樣我們就可以通過設(shè)置?table?水平居中，間接使里面的內(nèi)容居中。

（2）相對于用?table?的方法的好處是不用增加無語義標(biāo)簽，簡化標(biāo)簽嵌套深度。這個思路是這樣的，通過改變塊級元素的?display?屬性值為?inline?類型，然后設(shè)置?text-align:center?來實現(xiàn)居中。這種方法也有一定不妥之處就是把塊級元素改為行內(nèi)元素后，行內(nèi)元素比塊元素少了一些功能。比如說設(shè)定長寬值等，在項目運用中可能會有一些限制，大家可以自行選擇。

（3）通過給父元素設(shè)置浮動?float?，再設(shè)置父元素的?position?屬性為?relative?和?left：50%;?子元素設(shè)置?position：relative?和?left：-50%?來實現(xiàn)水平居中。這個好處是可以保留塊級元素仍然是以?display：block?的形式顯示，不會添加無意義的標(biāo)簽，不添加嵌套深度。確點是設(shè)置了?position：relative;?帶來了一些副作用。下面是第三種方法的實例代碼，放到?body?標(biāo)簽里面就可以了。

二、垂直居中：

對這個CSS居中問題，我們可以使用設(shè)置背景圖片的方法。舉例：

body {BACKGROUND: url(”圖片文件”) #FFF no-repeat center;}

關(guān)鍵就在于這個?center?屬性，它表示讓該背景圖片在容器中居中。你也可以把?center?換成?top left?或者直接寫上數(shù)字來調(diào)整它的位置。

方法一: 

三、css圖片居中用text-align:center無效怎么回事？

四、如何讓圖片在DIV中水平和垂直兩個方向都居中？

方法一：

思路：利用?text-align?屬性將圖片水平居中，然后設(shè)置?padding-top?的值使其垂直居中。

結(jié)構(gòu)如下：

CSS樣式如下：

div {width:300px; height:150px; background-color:#CCC; border:#000 1px solid; text-align:center; padding-top:50px;}

運行結(jié)果如下：

釋義：

圖片的尺寸為150x100px，DIV的大小為300x200px；

background-color:#CCC; border:#000 1px solid;為DIV加個邊框和背景色，便于觀察效果。

?text-align:center?,實現(xiàn)圖片的水平居中；?padding-top:50px?，50px這個數(shù)值是經(jīng)過計算得到的，?padding-top?的值具體算法如下：（DIV的高度 – 圖片的高度）/2，但這里要注意，根據(jù)盒模型原理，我們還要將DIV原來的高度200減去?padding-top?的值，這樣顯示的才是正確的，否則DIV會變高。

方法二：
思路：只用?padding?屬性，通過計算求得居中

結(jié)構(gòu)代碼同上；

CSS樣式如下：

div {width:225px; height:150px; background-color:#eee; border:#000 1px solid; padding-top:50px; padding-left:75px;}

備注：這里DIV的寬高計算都遵循盒模型原理，計算方法同上。


方法三：
思路：利用圖片的?margin?屬性將圖片水平居中，利用DIV的?padding?屬性將圖片垂直居中。

結(jié)構(gòu)代碼同上；

CSS代碼如下：

div {width:300px; height:150px; background-color:#eee; padding-top:50px; border:#000 1px solid;}

img {display:block; margin:0 auto;}

備注：

?Img?是內(nèi)聯(lián)元素，要設(shè)置其?margin?屬性使其居中，就要將其轉(zhuǎn)換為塊元素?display:block;?然后利用?margin:0 auto;?實現(xiàn)圖片的水平居中；（有的設(shè)計師為圖片再加個 div 標(biāo)簽，然后通過 div 標(biāo)簽的?margin?實現(xiàn)居中，也可以，不過，在結(jié)構(gòu)中就又多了對 div，相對麻煩點）至于垂直居中的方法和前面的都一樣，就不再重述。

以上方法都是有前提的，就是必須知道 DIV 與圖片的尺寸，否則無法完成垂直居中的效果。

用一行css居中并裁剪圖片的方法

設(shè)置圖片的裁剪尺寸非常簡單，你只需在 CSS 里使用這行代碼：

就是這樣。不需要語義、包裝 div 或者其他沒意義的代碼。

這種技術(shù)能很好地把大小不合適的頭像圖片裁剪為正方形或者圓形的圖片。以下面那只熊的寬圖片來舉例。一旦把 ?object-fit:cover ?技術(shù)應(yīng)用在這種圖片上，并且設(shè)置好寬和高，圖片自己就會進(jìn)行裁剪和居中。

?object-fit:cover?的裁剪方式和?background-size:cover?的完全相同，不過它是用來為 imgs、videos 和其他的媒體標(biāo)簽設(shè)置樣式的，而不是給背景圖片設(shè)置樣式。
相當(dāng)多的最新瀏覽器都支持 object-fit 技術(shù)，并且還有 polyfill 項目讓你能在更老的瀏覽器（IE8+）里使用該技術(shù)。