|line-height與line boxes高度
撐開行高度的是line-height（line-boxes），而不是字體大小
代碼：
效果：
注：如果元素內沒有內容，則不會撐開高度，因為line-boxes為0，即使指定了line-height也是不行的，只要有內容，行高就生效（下面的多行垂直居中的p的line-height就是這個道理）
|單行文字的垂直居中對齊
"把line-height值設置為height一樣大小的值可以實現單行文字的垂直居中",這句話可以換成“把line-height設置為您需要的box的大小可以實現單行文字的垂直居中”，優點 在於去掉height
代碼：
效果：
|多行文字的垂直居中
要實現高度不固定的文字垂直居中使用padding就好了。對於高度固定的div，里面文字單行或多行顯示，字體大小有大有小的情況怎么辦呢？方法之一就是借助於line-height。
line boxes的高度取決於它的下屬職員的最高高度。而這個高度由一個不占據任何空間的空格完成，方法即使設置font-size為0，line- height為所需要的高度。同時，我們為了分隔line boxes，同時要保持在一行上，需要設置display屬性為inline-block
css代碼：
.mulit_line{ line-height: 150px; background: #0af; padding-left: 5px; }
.mulit_line_span{ display: -moz-inline-stack; display: inline-block; line-height: 1.4em; vertical-align: middle;}
.mulit_line_i{ width:0; display: -moz-inline-stack; display: inline-block; vertical-align: middle; font-size: 0;}
html代碼：
<p class="mulit_line">
<span style="font-size:12px;" class="mulit_line_span">這里是高度為150像素的標簽內的多行文字，文字大小為12像素。<br />這里是第二行，用來測試多行效果。</span>
<i class="mulit_line_i"> </i>
</p>
效果：
(<i>的意思是我的行高為150px,我垂直居中，你跟我是同一行的，所有你也得跟我一樣垂直居中；）
補充有關於讓所有標簽在各個瀏覽器下（ff1-3,IE6-8,chrome,opera）都實現類似display:inline-block的寫法：
display:-moz-inline-stack;display:inline-block;*display:inline;zoom:1;
說明：讓行內元素（span，a標簽等實現類似inline-block的效果），display:-moz-inline-stack;display:inline-block;就足夠了。
要實現塊狀元素的inline-block，需要用到display:-moz-inline-stack;display:inline-block;*display:inline;zoom:1;
全部，其中display:-moz-inline-stack;display:inline-block;針對firefox，chrome，opera，IE8，而*display:inline;zoom:1;針對IE6和IE7。
|使用行高代替高度避免haslayout
在某些情形下，line-height可以和height互換，因為實現的效果一樣。都能撐開一個高度，然而這兩個css屬性有一個較隱蔽的差異，就是使用height會使標簽haslayout，而使用line-height則不會。
IE6，IE7下，類似inline-block屬性的元素里如果有block屬性的元素，如果該block haslayout，則該標簽會沖破外部inline-block的顯示而寬度100%顯示，從使按鈕自適應文字大小的效果失效，解決方法就是使用 line-height代替height。
CSS代碼
.out{display:inline-block; background:#a0b3d6; margin-top:20px;}
.in1{display:block; height:20px;}
.in2{display:block; line-height:20px;}
HTML代碼
<span class="out"> <span class="in1">height:20px;</span> </span> <span class="out"> <span class="in2">line-height:20px;</span> </span>
效果：、
前者沖破限制，寬度直接100%，后者自適應內部文字
（文章參考張鑫旭博客，自己總結一下，方便日后查閱）