css如何讓img垂直居中

css如何讓img居中顯示？ img垂直居中法？對於剛剛css入門的新手可能還不是很熟悉，下面我們來總結一下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垂直居中的全部介紹，如果你想了解更多有關CSS3教程，請關注php中文網。

以上是css如何讓img垂直居中的詳細內容。更多資訊請關注PHP中文網其他相關文章！