當父元素內只有一個行內元素時，我們會在父元素上添加line-height和text-align，使得行內元素居中，但是，當我們遇到連個高度不一的行內元素時，會怎么樣呢？
我們需要在長的元素上加上vertical-align:top
http://js.jirengu.com/gumuy/3/edit?html,css,output
張鑫旭
因為行內元素是自適應的，所以文字在里面應該是垂直居中的，但有時會因為font-weight，font-family變得不太垂直居中。line-height和height的不同
a. line-height的適用元素是所有的元素，而height不能在行內元素上有作用。
b. 當我們使用line-height時，里面的文字能夠居中放置。
c. 當我同時使用height和line-height時，塊級元素的高度以height為準。而行內元素height沒有作用，所以line-height為占據空間大小，若line-height小于文字自適應高度，line-height的高度為大。注意若將line-height設為0，似乎沒有什么作用。
總結一下：在塊級元素上時，height > line-height > 文字自適應。
在行內元素上時，line-height > 文字自適應。當然其實我們一般都會把line-height和height一樣大，所以不用考慮那么多。
這是我們使用line-height時的情況，對于行內元素而言，雖然邊界依然是包裹著文字，但是我們可以看到，line-height已經有了作用，占據了網頁的空間。
http://js.jirengu.com/juvuj/4/edit
- 關于height: 100% （width相同，另外100%是指占滿content）
MDN上的定義，<percentage>相對于元素的塊容器高度，如果塊容器的高度沒有顯式指定，計算值為 auto。
從上面這句話我們可以看出如果父元素設置了height=100px，子元素的設置高度height:100%,那么子元素的高度是100px。如果父元素是自適應的，沒有設置高度，那么子元素的高度設置成height:100%也依然是自適應的。
例子
a.遇到position:absolute時的情況
若父元素依然是自適應，而子元素設置position:absolute和height：100%，這時子元素的高度會是父元素高度的100%。
例子
b.遇到position:fixed的情況與上面類似，其高度是相對屏幕的了。
- 兩個行內元素的垂直居中問題。
對于這種情況，我一般直接用flex就可以很容易的解決。
打對于這種情況，既需要居中，icon和文字還糾纏在一起。我只能外層用的flex，里面用的vertical-align:top和margin解決的。而老師用的是display:table和table-cell，vertical-align:middle解決的。
5.sticky-footer
6.float也能居中
在購物車詳情的頭部中，我們使用了float，利用float的性質也很好的實現了居中。
- 在8-3中我們設置padding-top:100%，這時padding-top的大小等于width（黑科技）
