css怎么讓img垂直居中

這篇文章主要介紹“css怎么讓img垂直居中”，在日常操作中，相信很多人在css怎么讓img垂直居中問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”css怎么讓img垂直居中”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

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

　　1.使用flex讓img垂直居中

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

　　首先我們要先給托圖片添加一個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}

　　.flexboximg{width:100px;height:100px;align-items:center;}

　　2.使用display去實現(xiàn)img垂直居中

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

　　css代碼：

　　.tablebox{width:300px;height:250px;background:#fff;display:table}

　　#imgbox{display:table-cell;vertical-align:middle;}

　　#imgboximg{width:100px}

　　3.利用圖片的絕對定位去實現(xiàn)

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

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

到此，關(guān)于“css怎么讓img垂直居中”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>