css怎么讓img垂直居中

這篇文章主要介紹“css怎么讓img垂直居中”，在日常操作中，相信很多人在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}

　　.flexboximg{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;}

　　#imgboximg{width:100px}

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

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

　　css代碼：

　　body{background:#ccc;}

　　.posdiv{width:300px;height:250px;background:#fff;position:relative;margin:0auto}

　　.posdivimg{width:100px;position:absolute;top:50%;margin-top:-50px;}

　　以上三種方法我們推薦使用第三種，第三種的兼容性比較好，方法比較簡單，重點是掌握方法和原理。

到此，關于“css怎么讓img垂直居中”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！