對于許多前端來說，讓圖片居中有很多辦法，但是最簡單，最便捷的有哪些方法呢？

padding？ margin？對于單個圖片來說確實可以使用，不過注意不要觸發(fā)margin-top，padding還要做減法，更重要的是，你一旦使用了這個方法不同的圖片你每次都要修改相關數(shù)據(jù)，何其麻煩！所以，讓圖片居中并不是簡單的margin和padding就能解決的！

當然一個解決不了，兩個也解決不了！

1.單個圖片居中

這個方法只能只能試用于解決單個圖片居中的問題，為什么呢？多了就不好使了唄！

代碼如下圖所見！

Q：為啥不放在git hub上？

A：不為啥，就不想放，有本事來打我呀~~~~~

2.說完了一個圖片的居中方式，我們說說多個圖片的居中方式，目前我就會兩種，也是比較low的方法了。

簡單來說就是給圖片前面加一個i標簽，運用vertical-align方法實現(xiàn)

為啥是i，div可以不？可以！

不過不管哪種，你都要把他定義成行內(nèi)元素，為什么？w3cschool上是怎么說的：

vertical-align：該屬性定義行內(nèi)元素的基線相對于該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值。這會使元素降低而不是升高。在表單元格中，這個屬性會設置單元格框中的單元格內(nèi)容的對齊方式。

我是地址：http://www.w3school.com.cn/cssref/pr_pos_vertical-align.asp

RT，當我們想使用這個屬性的時候，一定要記得是行內(nèi)元素。是行內(nèi)元素之后，想怎么玩就怎么玩~~

好了，代碼如下：記住一定要定義i標簽的高度，而且高度必須是和父級一樣的，這樣才能居中。

3.這個方法是很久之前就有了，不過他在IE下會有兼容問題，大家可以自己測試下。

除此之外其實還有一種方法可以讓圖片居中，那就是display:flex,margin:o auto;不過這個方法鞥以后再和大家細說吧，有興趣的可以自己去查一下flex的相關布局。