歡迎大家先來看看我的水平居中篇：http://www.cnblogs.com/cuncunjun/p/6549955.html
首先要清楚一個問題，什么時候你會要設置垂直居中？大家不要被各種例子弄暈頭，靜下心來想一想！
• 一個父元素，如果不設置高度的話，默認就是緊包着子元素，如果你的padding-top和padding-bottom是相等，那么這本身就是一個垂直居中的效果！！！！！
• 當然，如果你的子元素並不獨占一行，而是行內元素和inline-block元素的話就不一樣了。比如下面這個例子：
<div id="container">
<span>aaaaaaaaaaaa我我我</span>
<img src="1.jpg" width="100px"/><img src="1.jpg" width="120px"/>
</div>
這涉及到一個知識點，就是line-box原理。詳情可見張鑫旭老師的博客： http://www.zhangxinxu.com/wordpress/2010/01/css-float浮動的深入研究、詳解及拓展一/
inline和inline-block都是在一行顯示，如圖所示由於圖片本身有高度，就會把整個行高撐大，但是文字和圖片依然在一行。
相信細心地朋友會發現，圖片下面有一條小空白。這就涉及到了vertical-align屬性，張鑫旭老師的博客寫的很詳細。在這里我給大家簡單總結一下。
vertical-align只對inline-block元素有效，換句話，inline-block 自帶vertical-align屬性。屬性的值有很多，主要有下圖這幾種：
Vertical-align默認值是baseline！即使你沒有設置這個屬性，也會有。所以圖片是和整個line-box的baseline對齊，所以下面會有空白。
言歸正傳：這種情況下，誰想居中誰就自己設Vertical-align：middle；當然只對line-block有效！比如我對兩個圖片設置垂直居中，
#container{
border:2px solid blue;
}
img{
vertical-align:middle ;
}
效果如圖所示，很多人可能會問，怎么文字也居中了呢？
答：其實不是文字居中，而是圖片相對整個行居中，也就是文字所在的行居中，圖片下移，這個時候上方被圖片撐起來的line-height變矮了，所以整個行都上移，直到最高的圖片碰到父元素的border。只不過視覺效果上是文字也居中了。
• 再然后，就是父元素設置了height，子元素如何垂直居中？
記住一點vertical-heigh只是針對inline-block有效，並且僅僅是相對元素所在line-box垂直居中！！也就是說只能在一行中折騰！
#container{
border:2px solid blue;
height:250px;
}
img{
display:inline-block;
vertical-align:middle ;
}
我給父元素設置了高度，會發現圖片仍然只在自己的那行居中，並不在整個父元素居中。
就算是塊狀元素設置display：inline-block，也是只在自己那一行居中！
所以這種情況，vertical-align就排不上用場了，當然還是有居中的辦法，具體見下文嘍！！
1.line-height（適用單行文本)##
height: 該元素的高度，line-height: 指在文本中，行與行之間的 基線間的距離 。 設置line-height，比font-size大就行了。height不設就行，默認是line-height的高，非得設值的話，就height=line-height即可。 ```
##2.適用於父元素有自己的的height，自己是塊狀元素的情況（最常用）##
**a. 負外邊距:設置元素為absolute/relative/fixed，（1）偏移量（top或者bottom）設置為50%，（2）margin設置為元素寬度一半乘以-1。** 如果塊元素尺寸已知，可以通過以下方式讓內容塊居中於容器顯示： 通過absolute設置top: 50%; left: 50%;外邊距margin取負數，大小為width/height（不使用box-sizing: border-box時包括padding）的一半。 ```
b. position:absolute/fixed + top,bottom:0 + margin:auto
<div id="a">
<div id="b">看我是否可以居中。</div>
</div>
#a{
border: solid blue;
width:800px;
height:350px;
margin:50px;
padding:40px;
position: relative;
}
#b {
width: 300px;
height: 100px;
padding: 20px;
border: 1px solid red;
position:absolute;
top:0;
bottom: 0;
margin:auto 0;
}
和水平居中是一個原理，如果被居中的元素沒有設置height的話，content就會被扯大，充滿父元素。
position：relative就失效了，因為他和父元素沒有關系而是相對原來的位置偏移，上下設置top bottom：0是沒有變化的。
fixed可以實現居中，只不過不是相對父元素而是可視窗口。
3.父元素height隨意，自己是行內、塊狀都適用###
- **a. table標簽** 使用插入 table(包括tbody、tr、td)標簽 ```
|
看我是否可以居中。
看我是否可以居中。
看我是否可以居中。
|
因為 td 標簽默認情況下就默認設置了 vertical-align 為 middle，所以我們不需要顯式地設置了。雖然我顯示設值了padding為0，但是根據圖片來看，td的content是緊包着子元素的，剩下的用padding來填充，所以視覺上是垂直居中的效果。無論里面包含的是文本還是圖片。
- b. display:table-cell + vertical-align:middle
在 chrome、firefox 及 IE8 以上的瀏覽器下可以設置塊級元素的display 為 table-cell（設置為表格單元顯示），激活 vertical-align 屬性，但注意 IE6、7 並不支持這個樣式, 兼容性比較差。注意和新增table標簽不一樣的是一定要設置vertical-align。（給父親設不是給自己）
<div class="container">
<div>
<p>看我是否可以居中。</p>
<img src=""/>
</div>
</div>
<style>
.container{
height:300px;
background:#ccc;
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>
感謝評論區的朋友，提供了一種新的思路。但是有一點錯誤，我后面會指正出來，不管怎么還是謝謝你！ 前面提到的都是css的傳統布局方法，垂直居中實現起來確實什么麻煩。2009年，W3C提出了一種新的方案—-**Flex布局**，可以簡便、完整、響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支持，這意味着，現在就能很安全地使用這項功能。 關於flex布局的基礎知識我就不一一列舉了，菜鳥教程這一節講的什么清晰，大家可以自行學習。http://www.runoob.com/w3cnote/flex-grammar.html
##4.CSS3的flex彈性盒子布局法## 讓我帶着大家來逐步嘗試，首先給父元素設置display：flex，並設置按照主軸的排列方式即水平方向從左到右依次排列row,如果你想要垂直居中的子元素只有一行可以設置nowrap。如果你想要好幾行元素作為整體一起居中的話就可以設置wrap。flex布局真的很神奇很方便！ ``` #container{ width:600px; border:2px solid blue; display:flex; flex-flow: row nowrap; }
那我們給圖片分別設置好高度之后，接下來，就要真正的設置垂直居中了！
注意justify-content:center;是水平居中。而垂直居中是align-items:center;
附上完整代碼：
#container{
width:600px;
border:2px solid blue;
height:250px;
display:flex;
flex-flow: row nowrap;
align-items:center;
}
<div id="container">
<span id="child">aaaaaaaaaaaa我我我</span>
<img src="1.jpg" width="100px" height="100px"/>
<img src="1.jpg" width="120px" height="120px"/>
<img src="1.jpg" width="80px" height="80px"/>
<img src="1.jpg" width="110px" height="110px"/>
</div>
完美！！！
有同學可能會產生疑問，如果子元素是塊狀元素怎么辦？
flex布局很強大，無論子元素是塊狀還是行內統統都排排坐在一行，誰也不能獨占一行。進了flex的門，一生都是flex的魂！！！
flex還有很多其他好玩的屬性，大家可以自己去練練手，十分有趣！！