1. 當(dāng)父元素內(nèi)只有一個(gè)行內(nèi)元素時(shí)，我們會(huì)在父元素上添加line-height和text-align，使得行內(nèi)元素居中，但是，當(dāng)我們遇到連個(gè)高度不一的行內(nèi)元素時(shí)，會(huì)怎么樣呢？
   我們需要在長(zhǎng)的元素上加上vertical-align:top
   http://js.jirengu.com/gumuy/3/edit?html,css,output
   張?chǎng)涡?
   因?yàn)樾袃?nèi)元素是自適應(yīng)的，所以文字在里面應(yīng)該是垂直居中的，但有時(shí)會(huì)因?yàn)閒ont-weight，font-family變得不太垂直居中。

2. line-height和height的不同
   a. line-height的適用元素是所有的元素，而height不能在行內(nèi)元素上有作用。
   b. 當(dāng)我們使用line-height時(shí)，里面的文字能夠居中放置。
   c. 當(dāng)我同時(shí)使用height和line-height時(shí)，塊級(jí)元素的高度以height為準(zhǔn)。而行內(nèi)元素height沒有作用，所以line-height為占據(jù)空間大小，若line-height小于文字自適應(yīng)高度，line-height的高度為大。注意若將line-height設(shè)為0，似乎沒有什么作用。

總結(jié)一下：在塊級(jí)元素上時(shí)，height > line-height > 文字自適應(yīng)。
在行內(nèi)元素上時(shí)，line-height > 文字自適應(yīng)。當(dāng)然其實(shí)我們一般都會(huì)把line-height和height一樣大，所以不用考慮那么多。

3. 關(guān)于height: 100% （width相同，另外100%是指占滿content）
   MDN上的定義，<percentage>相對(duì)于元素的塊容器高度，如果塊容器的高度沒有顯式指定，計(jì)算值為 auto。
   從上面這句話我們可以看出如果父元素設(shè)置了height=100px，子元素的設(shè)置高度height:100%,那么子元素的高度是100px。如果父元素是自適應(yīng)的，沒有設(shè)置高度，那么子元素的高度設(shè)置成height:100%也依然是自適應(yīng)的。
   例子
   

a.遇到position:absolute時(shí)的情況
若父元素依然是自適應(yīng)，而子元素設(shè)置position:absolute和height：100%，這時(shí)子元素的高度會(huì)是父元素高度的100%。
例子

b.遇到position:fixed的情況與上面類似，其高度是相對(duì)屏幕的了。

4. 兩個(gè)行內(nèi)元素的垂直居中問題。

對(duì)于這種情況，我一般直接用flex就可以很容易的解決。

打?qū)τ谶@種情況，既需要居中，icon和文字還糾纏在一起。我只能外層用的flex，里面用的vertical-align:top和margin解決的。而老師用的是display:table和table-cell，vertical-align:middle解決的。

5.sticky-footer

6.float也能居中
在購(gòu)物車詳情的頭部中，我們使用了float，利用float的性質(zhì)也很好的實(shí)現(xiàn)了居中。

7. 在8-3中我們?cè)O(shè)置padding-top:100%，這時(shí)padding-top的大小等于width（黑科技）