css讓img垂直居中的方法

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

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

1.使用flex讓img垂直居中

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

首先我們要先給托圖片添加一個(gè)div，并且定義為寬度為100px，高度也是100px，并且給它定義一些基本的屬性，其中我們把div中的display元素設(shè)置成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去實(shí)現(xiàn)img垂直居中

首先我們要是先創(chuàng)建一個(gè)div，以及對有圖片的div設(shè)置樣式，我們可以給img的父級添加一個(gè)diaplay，并且屬性為table，并且把包含圖片的div中的display屬性設(shè)置成table-cell，其實(shí)實(shí)現(xiàn)居中我們要做的就是給有圖片的div設(shè)置成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.利用圖片的絕對定位去實(shí)現(xiàn)

我們把有圖片的div設(shè)置有背景的，并且給img的父元素添加相對屬性，并且給子元素添加絕對和相對屬性，還要把top的值設(shè)置成50%，現(xiàn)在要做的就是給img元素設(shè)置成一個(gè)負(fù)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;}

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