1.元素的顯示方式：
1 display:inline; 3 display:linline-block; 5 display:block
display:inline 表示，元素做為內聯元素顯示，兩個或者多個內聯元素可以並列成一行顯示；常見的內聯元素如：span strong 標簽；內聯元素的特點是：(1)不能給內聯元素設置寬和高；(2)元素和其他元素共占一行;
display:block 表示，元素作為塊級元素顯示，兩個或者多個塊級元素分成多行顯示；常見的塊級元素如：div, h1~h5 標簽；塊級元素的特點是：可以給元素設置寬高，元素獨占一行；
display:inline-block,元素作為內聯元素顯示，在父級元素寬度足夠的情況下，兩個或者多個inline-block 元素並列成一行顯示；inline-block 的元素可以設置寬高；
2. 對於vertical-align：
支持程度：所有瀏覽器都支持 vertical-align 屬性（包括 IE8）
作用：該屬性定義行內元素的基線相對於該元素所在行（父級元素）的基線的垂直對齊方式。
可能的取值方式:
baseline： 元素的基線放置在父級元素的基線上；（vertical-align 屬性的默認值是 baseline）；
text-top/text-bottom：把元素的底端垂直與父元素的文本的頂端/底端對齊；
top：把元素的頂端與行中最低的元素的頂端對齊。
bottom：把元素的頂端與行中最低的元素的頂端對齊。【注意，top/bottom 對應的邊界是 父級元素的border 的內邊界】
middle：把元素相對於父級元素垂直居中；
所以為了使得元素相對於父級元素垂直居中，我們可以把元素的 display 屬性設定為 inline-block;同時把元素的 vertical-align 屬性值設定為 middle;
3. 如何元素相對於父級元素居中:
<div class="father"> <div class="son son1"></div>
<div class="son son2"></div> </div>
可以采取樣式：
.father {
height: 100px;
width: auto;
}
/*
將 after 偽元素添加到father內容元素后面，然后用 after 偽元素把 內容撐開到和父級元素同高；
*/
.father:after {
font-size: 0;
/*內容為空*/
content: "";
/*高度為父級元素的100%*/
height: 100%;
}
.son {
/*顯示為內聯元素*/
display: inline-block;
/*對齊方式為居中*/
vertical-align: middle;
}
原理是什么呢？我們可以通過下面的一個 demo 來的得到。
<html> <head> <style> div { position: relative; font-size: 0; } .outer { height: 100px; width: 200px; background: #FF0; } .inner { width: 25%; display: inline-block; vertical-align: middle; } .inner1 { height: 20px; background: #010; } .inner2 { background: #202; height: 40px; } .inner3 { background: #103; height: 60px; } .inner4 { background: #401; height: 80px; } .father { height: 100px; width: 100px; background: red; } .son { height: 50px; } /*.outer:after { font-size: 0; display: inline-block; content: ""; position: relative; }*/ </style> </head> <body> <div class="outer"> <div class="inner inner1">1</div> <div class="inner inner2">2</div> <div class="inner inner3">3</div> <div class="inner inner4">4</div> </div> </body> </html>
代碼運行后的排版：
display:inline-block；vertical-align：middle 的元素，元素是相對於同級最高的元素（撐開的區域居中的）；所以當我們把 after 偽元素設置高度：height：100% 的時候，其他同級元素就相對於父級元素居中了.