css讓img垂直居中的方法

這篇文章給大家分享的是有關css讓img垂直居中的方法的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

img垂直居中方法有很多，其中就包括以下三種方法

1.使用flex讓img垂直居中

在css中，我們可以使用flex去實現垂直居中，但是flex并不是一個很好的方法，現在很多瀏覽器并不支持flex，例如IE8,9。

首先我們要先給托圖片添加一個div，并且定義為寬度為100px，高度也是100px，并且給它定義一些基本的屬性，其中我們把div中的display元素設置成flex，然后把另外一條添加align-items: center屬性。

css代碼：

body{ background:#999}
.flexbox{width: 300px;height: 250px;background:#fff;display: flex;align-items: center}
.flexbox img{width: 100px;height: 100px;align-items: center;}

2.使用display去實現img垂直居中

首先我們要是先創建一個div，以及對有圖片的div設置樣式，我們可以給img的父級添加一個diaplay，并且屬性為table，并且把包含圖片的div中的display屬性設置成table-cell，其實實現居中我們要做的就是給有圖片的div設置成vertical-align: middle;屬性就可以了。

css代碼：

.tablebox{width: 300px;height: 250px;background: #fff;display: table}
#imgbox{display: table-cell;vertical-align: middle;}
#imgbox img{width: 100px}

3.利用圖片的絕對定位去實現

我們把有圖片的div設置有背景的，并且給img的父元素添加相對屬性，并且給子元素添加絕對和相對屬性，還要把top的值設置成50%，現在要做的就是給img元素設置成一個負margin-top值。

css代碼：

body{background: #ccc;}
.posdiv{width: 300px;height: 250px;background: #fff;position: relative; margin:0 auto}
.posdiv img{width: 100px;position: absolute;top: 50%;margin-top: -50px;}

感謝各位的閱讀！關于css讓img垂直居中的方法就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！