一點感悟
曾子曰:"吾日三省吾身", 意思就是說每天要多次想一想自己到底干了什么 O(∩_∩)O~。好吧，這個其實大家都知道，那為什么還要在這里扯呢？很簡單，就是知道的人很多，但做到的人很少。結合自己的工作經驗，談談前端開發的一些認識誤區：
- 只知其然，不知其所以然；
- 解決過的問題，下次同樣還是忘記，要查找相關的資料；
- google，百度一個方法，實現了就可以了；
這些認識的誤區，我相信很多人（包括我自己）都會犯，原因是多種多樣的：
- 項目有時候確實很急，我們沒有時間來搗鼓這些東西；
- 哎，以后遇到再找資料好了，反正自己已經知道怎么查找關鍵字了；
- 我去，哥（姐）還要和女（男）盆友去逛街呢，沒空搞這些細節；
- ......
總結原因，那就是對技術的專注度不夠，沒有熱情往縱深的方向去挖掘。有人可能會反駁了: "擦，css就那些有限的的屬性，感覺沒什么好學的"（ps：自己以前就是報這種態度的，慚愧）。其實這是正確的嗎？css其實是很精深的一門學問，別看只有一些屬性，但屬性的各種值，屬性之間的搭配，屬性之間的差異......，還有瀏覽器不同的表現，這些都了解清楚了嗎？我們常常在感慨為什么別人會實現一些很好的效果出來，會提出很好的解決方案，其實就是因為他們對屬性，屬性值了解得很透徹，知道怎樣的搭配能產生怎樣的效果。所以，騷年們，如果想在前端有些進步，好好靜下心來學習吧。專注，實踐，學習，歸納
本文是css學習總結的開篇之作，也是我最近感悟的一些總結，希望對您有一些思考吧，廢話什么的就不多說了。
本文地址: http://forkme.info/element-vertical-align/或者http://www.cnblogs.com/blackmanba/p/element-vertical-align.html, 轉載請注明源地址。
開始
最近在搗鼓頁面的時候遇到一個問題，如何實現文字與圖片的垂直居中？如圖：
其實這個問題網上答案一大堆，很多同行也都有自己的各種解決方法，下面查找資料再經過自己實驗總結的方法，會着重介紹優缺點。說了這么多，接下來就是展示最終的顯示效果，如果不知道效果是什么的話，請點擊我思密達
1. inline-height法
這種方法相信很多人都知道並且嘗試過，主要是利用inline元素（或者inline-block元素）的inline-box模型（ps：這個可以查看@旭哥的文章拜拜了,浮動布局-基於display:inline-block的列表布局，原理什么的旭哥都講得很清楚了，這里就不要再瞎子點燈——多此一舉了）, 只要設置inline-heigth的值和父元素的height一致即可讓文字居中顯示，樣式如下：
.inline {
display: inline;
*display: inine;
zoom: 1;
}
.lg{
font-size: 18px;
font-weight: bold;
line-height: 80px; /* 注意：line-height和容器的高度一致 */
}
最終效果圖上面已經截過，這里就不再搞多一張了，免得浪費親們寶貴的時間。 O(∩_∩)O~，
最終效果請點擊這里查看,
源代碼在可以在開發者工具中查看, 下同。
1.1 優點
- 簡單，使用很少的樣式就可以實現；
- 兼容性強，兼容IE6+, chrome和Firefox（opera沒試過）
1.2 缺陷
- 只能用於單行文字，多行文字間距過大，效果請點擊；
- 要知道父容器高度，如果不想定死高度的話只能通過javascript獲取並設置，復雜度增大；
- line-height只能適用於inline和block級別的元素；
1.3 總結
line-height讓文字垂直居中這個方法對於單行文字來說那是再好不過，不用理相鄰元素是什么，圖片啊，文字啊什么都妥妥的沒影響。經過之前一段時間的使用，可以說效果不錯。當然，如果您的需求是多行文字或者是做自適應布局的話，建議不要用這個方法，因為~~~~不適合。%>_<%
2. 采用absolute+margin:auto
這個方法涉及到一個概念，就是margin屬性的屬性的定位問題，絕對定位的元素在填充的時候會根據自身的高度和margin值來決定最終位置。如果什么都木有設置，默認就是填充整個父容器，尺寸固定就會通過margin來決定最后的位置。概念什么的比較繞，我們可以點擊這里查看最終結果，css如下：
.parent {
position: relative;
}
.abs {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
height: 20%;
}
2.1 優點
- 簡單
- 文字多的話，兄弟元素也能對應居中，不管兄弟元素是什么，效果請點擊
- 適應性強，父容器不用限死高度
2.2 缺陷
- IE6,7 不兼容
2.3 總結
這個方法對於不用兼容IE6, 7的應用來說是十分高效並且實用的，在實際項目的使用中並不推薦這種用法，因為絕對定位脫離了文檔流，會帶來一些維護上的問題，並且也不利於重用。當然，這一切都是權衡，綜合考慮開發和維護成本后，如果覺得合適，就可以采用。
3. 采用display: table-cell
這個方法使用到了table-cell來布局，其實table-cell，顧名思義就是單元格，設置了table-cell的元素其實和傳統的td標簽效果是一致的，最終效果請點擊這里，代碼如下：
.cell {
display: table-cell;
height: 80px;
vertical-align: middle;
}
3.1 優點
- 簡單，高效
- 適應性強
3.2 缺點
- IE6,7 不兼容（如果是圖片居中可以使用font-size，文字不可以）
- 容器高度固定，設置overflow: hidden 會導致文字不顯示
- 文字撐開兄弟元素不居中，效果
3.3 總結
使用table-cell的方式總體來說是不錯的解決方案。當然，缺點也很明顯，見上面。根據具體情況具體分析使用即可
4. 采用inline-block 方法
這個方法是目前為止我個人覺得最好的方法。原因很簡單：簡單易懂，容易上手，兼容性強。此方法本質上是利用了inline-block的垂直居中對齊特性。廢話不多說，請點擊我。不想看效果的童鞋可以直接看代碼，如下
.inline-block {
display: inline-block;
*display: inline;
zoom: 1;
vertical-align: middle;
}
4.1 一點小結
此方法沒有什么好說的，無論是兼容性還是其他特性都能完美呈現，並且不必知道文字高度，對於高度超過圖片的文字也能夠完美適應。真要說不好也就是先要理解inline box模型（ps：⊙﹏⊙b汗，有硬想缺點的嫌疑）。
5. 采用button 方法
這個方法是無意中看到的，其實原理很簡單，但很有創意。那就是利用控件的特有屬性。button標簽就是這樣的一個例子，因為其特性，我們就可以利用它來實現對應的效果了。請點擊我。代碼如下：
<button>
<a href="#" class="inline-block w60p verticalmiddle" style="text-align: left;">盛松成：中國信貸結構繼續改善</a>
<img src="http://jsfiddle.qiniudn.com/news3.png" alt="news" class="fn nomargin verticalmiddle">
</button>
5.1 優點
- 利用button本身的屬性，簡單明了，甚至可以不用寫css
- 擴展性好，能根據文字高度自適應
5.2 缺點
- 典型的為了效果使用標簽，可維護性低
- 不滿足標簽的語義化，對搜索引擎不友好
結語
本文算作是自己前端開發的一個開端，主要是對自己知道的方法的總結和思考，並寫成文章方便自己以后查閱。希望對您的學習有所幫助。隨時歡迎交流意見，請在下方評論，多多益善!!