參考文章：
深入了解CSS的line-height屬性
Vertical-Align: 你需要知道的所有事【譯】
Vertical-Align: All You Need To Know
1、什么是行間距或者行高（line-height）
line-height是指文本行基線間的垂直距離。
1.1、頂線，中線，基線，底線
從上到下分別是頂線，中線，基線，底線。vertical-align的四個(gè)屬性top,middle,baseline,bottom就是與這四條線有關(guān)。
1.2、行高，行距，半行距
- 行高是指上下文本行基線間的垂直距離。（上圖中兩條紅線間的垂直距離）
- 行距是指一行底線到下一行頂線的垂直距離。（第一條粉線和第二條綠線間的垂直距離）
-
半行距就是行距/2。(圖中可以看出，半行距=(行高-字體size)/2 )
1.3、內(nèi)容區(qū)，行內(nèi)框，行框
- 內(nèi)容區(qū)：頂線和底線包裹的區(qū)域（字體的size）
- 行內(nèi)框：在沒有其他因素影響的時(shí)候（padding等），行內(nèi)框等于內(nèi)容區(qū)。而設(shè)定行高時(shí)行內(nèi)框高度不變，半行距分別增加/減少到內(nèi)容區(qū)的上下兩邊（深藍(lán)色區(qū)域）行框（line box）。（字體size不變，修改行高就是修改行距）
- 行框：行框高度等于本行內(nèi)所有元素中行內(nèi)框最大的值（以行高值最大的行內(nèi)框?yàn)榛鶞?zhǔn)，其他行內(nèi)框采用自己的對(duì)齊方式向基準(zhǔn)對(duì)齊，最終計(jì)算行框的高度），當(dāng)有多行內(nèi)容時(shí)，每行都會(huì)有自己的行框。
1.4、line-height的設(shè)置
百分比方式設(shè)置
<body>
121212
<p>121212</p>
</body>
body{
font-size:16px;
line-height:120%;
}
p{
font-size:32px;
}
line-height的百分比（120%）和body的字體大?。?6px），被用來計(jì)算（16*120=19.2），這個(gè)值會(huì)被層疊下去的元素所繼承。
補(bǔ)充
p{
font-size:32px;
line-height:60px;
padding:10px
}
最終盒模型
盒模型中，內(nèi)容（不是上文說的內(nèi)容區(qū)，上文的內(nèi)容區(qū)是頂線與底線間的區(qū)域）的高度等于line-height的值。為什么會(huì)有margin？瀏覽器默認(rèn)P的上下margin是1em,設(shè)置了P的font-size是32px,所以1em=32px。上下margin就是32px。
長(zhǎng)度方式（px）設(shè)置
<body>
121212
<p>121212</p>
</body>
body{
font-size:16px;
line-height:20px;
}
p{
font-size:32px;
}
值normal
<body>
121212
<p>121212</p>
</body>
body{
font-size:16px;
line-height:normal;
}
p{
font-size:32px;
}
body的line的line-height是22px,所以normal等于1.375
p的line-height：32px*1.375=44px（normal并不是精確的等于1.375）
純數(shù)字
就是將normal改為一個(gè)想要的準(zhǔn)確數(shù)字。
1.5、各種BOX
<body>
<p>這個(gè)<em>強(qiáng)調(diào)</em> 元素為行內(nèi)元素</p>
</body>
body{
font-size:16px;
line-height:1.5;
}
p{
font-size:32px;
padding:10px;
}
containing box
p就是一個(gè)containing box，包含了其他boxs。
inline box
在段落內(nèi)，有一系列的inline box,inline box不會(huì)讓內(nèi)容成塊顯示，而是排成一行?！皬?qiáng)調(diào)”是一種inline box,“這個(gè)”，“元素為行內(nèi)元素”為一種匿名inline box。
line box
多個(gè)inline box組成line box，多個(gè)line box組成containing box。
Content Area
Content Area是圍繞著文字的一種看不見的box,高度取決與font-size
inline box與line-height
font-size:32px，line-height:48px，行間距=48px-32px=16px，半行間距=8px。
半行間距會(huì)用在Content Area的頂部和底部。
這里inline box的高度就是line-height。inline box包著Content Area
但是，當(dāng)line-height小于font-size。line box的高度還是line-height,所以line-box的高度小于Content Area的高度，Content Area會(huì)溢出line-box。
inline box 與line box
line box的高度取決于他內(nèi)部最高的inline box。
2、vertical-align
vertical-align是用來對(duì)齊內(nèi)聯(lián)級(jí)元素的。設(shè)置為以下display屬性的元素，它們都被認(rèn)為屬于內(nèi)聯(lián)級(jí)元素。inline、inline-block or **inline-table **(本文中不涉及此種情況)：
inline內(nèi)聯(lián)元素基本上是包裹文本的標(biāo)簽。
inline-block內(nèi)聯(lián)塊元素則如它們的名字所示：擁有內(nèi)聯(lián)特性的塊元素。他們可以有width和height（可能是由自己的內(nèi)容定義），以及padding、border和margin。
內(nèi)聯(lián)級(jí)元素彼此緊挨著放在一行中。一旦有更多的元素被放置到當(dāng)前行中，一個(gè)新的行將會(huì)在它下面創(chuàng)建。所有這些行有所謂的“行框”，行框中包含所有的內(nèi)容。不同大小的內(nèi)容意味著不同高度的行框。在下面的插圖中，行框的頂部和底部都是用紅線表示的。
在行框中，元素的vertical-align屬性是負(fù)責(zé)垂直對(duì)齊的。那么，到底元素垂直對(duì)齊的參照物是什么？
參照物：父元素的基線和外邊緣
看看元素的基線和行框的外觀：
inline元素：
三行并排的文本。行框的頂部和底部邊緣用紅線表示，字體的高度由綠線表示，基線由一條藍(lán)線表示。在左邊，有一個(gè)line-height設(shè)置為與字體font-size大小相同高度的文本，綠線和紅線重疊在一條線上。在中間，line-height是字體的兩倍大。在右邊，line-height是字體大小的一半大。
內(nèi)聯(lián)元素（display:inline）的外邊緣與其行高的頂部和底部邊緣對(duì)齊，行高可以小于字體的高度。所以，行框就是上面的圖中的紅線。
內(nèi)聯(lián)元素的基線是字符放置的位置線（字母x底部所在的水平線），即圖中的藍(lán)線。粗略地說，基線是在字體1/2高度的下面的某個(gè)地方。
inline-block元素：
inline-block因?yàn)橐呀?jīng)有寬和高，可能存在多行，每行都有自己的基線和行框，所以會(huì)比較特殊。
上圖中，最外層是div，里面分別是三個(gè)inline-block的span，黃色為border，綠色為padding，藍(lán)色為content area（一個(gè)span，其中有一個(gè)字母“C”）。左邊的inline-block的span的內(nèi)容（span）是一個(gè)正常文檔流元素。中間的inline-block的span還額外加了overflow: hidden。右邊的inline-block的span包含一個(gè)流外的span(但內(nèi)容區(qū)域有一個(gè)高度)(譯者注：流內(nèi)的元素必須是普通文檔流（normal flow）中的元素，流外的元素必須是浮動(dòng)或絕對(duì)定位的元素以及根元素。)。藍(lán)線為每個(gè)inline-block的span的基線。內(nèi)聯(lián)塊元素的外邊緣是其margin框的頂部和底部邊緣，即圖中的紅線。
內(nèi)聯(lián)塊元素（上圖三個(gè)inline-block的span）的基線取決它包含的內(nèi)容是否在文檔流中：
- 在流內(nèi)內(nèi)容的情況下，內(nèi)聯(lián)塊元素的基線是正常流中最后一個(gè)內(nèi)容元素的基線（左邊的例子）。對(duì)于這最后一個(gè)元素，它的基線是根據(jù)它自己的規(guī)則找到的。
<div class="demo1">
x<span>
x<span style="display:inline-block;height:30px;width:100px;background-color:blue">x</span>
x
</span>
</div>
.demo1 span{
display:inline-block;
background-color:silver;
height:90px;
}
灰色背景的元素內(nèi)部有三個(gè)子元素，兩個(gè)“x”,一個(gè)span。元素的基線就是最后一個(gè)正常流元素（“x”）的基線。
修改元素的長(zhǎng)度，使其內(nèi)容出現(xiàn)多行：
最外面的X怎么也跟著移動(dòng)了？這涉及行框基線的移動(dòng)，下文細(xì)說。
- 在流內(nèi)內(nèi)容但內(nèi)聯(lián)塊元素有overflow:hidden屬性的情況下，基線是內(nèi)聯(lián)塊元素margin框的底部邊緣（例如在中間的圖）。
修改上面的例子樣式：
.demo1>span{
display:inline-block;
background-color:silver;
height:90px;
width:100px;
margin:10px;
overflow:hidden;
}
通過最外面的x大致知道行框的基線位置，就是內(nèi)聯(lián)塊元素的下外邊距的地方，也是內(nèi)聯(lián)塊元素元素的基線位置。
一開始此處有疑惑：內(nèi)聯(lián)塊元素元素的基線跑到了下外邊距處，那么元素里面的內(nèi)容不應(yīng)該以這條基線做定位嗎？群里問了大佬，內(nèi)聯(lián)塊元素已經(jīng)設(shè)了寬高，可能有多行（即使只有一行），每行有各自的行框，然后又根據(jù)規(guī)則定位了，跟內(nèi)聯(lián)塊元素的基線已經(jīng)沒有關(guān)系。
- 在流外內(nèi)容的情況下，基線是內(nèi)聯(lián)塊元素margin框的底部邊緣（例如在右邊）。
<div class="demo1">
x<span>
<span style="display:inline-block;height:30px;width:100px;background-color:blue;">x</span>
</span>
</div>
.demo1>span{
display:inline-block;
background-color:silver;
height:90px;
width:100px;
}
加上浮動(dòng)
<div class="demo1">
x<span>
<span style="display:inline-block;height:30px;width:100px;background-color:blue;float:left">x</span>
</span>
</div>
行框的基線是可變的
當(dāng)使用vertical-align時(shí)，基線放置在哪里可能是最令人疑惑的部分。它需要滿足vertical-align的值和行框的高度等所有條件?；€的位置猶如是方程中的一個(gè)自由參數(shù)。
行框的基線是看不見的，但你可以使它很容易看到。只要在文本行的開頭添加一個(gè)字符，像我增加了一個(gè)“X”的字母。如果這個(gè)字符不以任何方式對(duì)齊，它將默認(rèn)地坐在基線上。
圍繞著行框的基線的部分（綠線），我們可以稱其為文本框。文本框可以簡(jiǎn)單地被認(rèn)為是行框內(nèi)的內(nèi)聯(lián)元素，沒有任何對(duì)齊。文本框的高度等于它的父元素的字體大小。因此，文本框只圍住了行框內(nèi)的無格式文本。由于這個(gè)文本框是綁在基線上的，當(dāng)基線移動(dòng)時(shí)它將移動(dòng)。（注：此文本框在W3C規(guī)范中稱為“strut（支柱）”）
vertical-align的值
1）將元素的基線，參照父元素的基線對(duì)齊
baseline：元素的基線與父元素的基線對(duì)齊。
sub：元素的基線偏移到父元素的基線之下。
sup：元素的基線偏移到父元素的基線之上。
<percentage>：元素的基線相對(duì)于父元素的基線偏移了一個(gè)百分比（該百分比是對(duì)比元素自身的line-height計(jì)算得出）。
<length>：元素的基線相對(duì)于父元素的基線偏移了一個(gè)絕對(duì)長(zhǎng)度。
2）將元素的中心點(diǎn)，參照父元素的基線對(duì)齊
middle：將元素的頂部和底部之間的中心點(diǎn)，對(duì)齊父元素的基線之上x-height的1/2之處（x-height為字母x的字符高度）。
3）將元素的外邊緣，參照父元素的文本框?qū)R
text-top：將元素的頂部邊緣，對(duì)齊到父元素的文本框的頂部邊緣。
text-bottom：將元素的底部邊緣，對(duì)齊到父元素的文本框的底部邊緣。
4）將元素的外邊緣，參照父元素行框的外邊緣對(duì)齊
top：元素的頂部邊緣對(duì)齊到父元素的頂部邊緣。
bottom：元素的底部邊緣對(duì)齊到父元素的底部邊緣。
基線的移動(dòng)
如果一行中有一個(gè)高個(gè)的元素占據(jù)了整行的高度，那么vertical-align對(duì)它沒有影響。它的頂部和底部沒有空間讓它移動(dòng)。為了滿足行框基線的對(duì)齊方式，行框的基線必須移動(dòng)。矮個(gè)元素設(shè)置了vertical-align: baseline。在左邊，高個(gè)元素設(shè)置了vertical-align: text-bottom。在右邊，高個(gè)元素設(shè)置了vertical-align: text-top。你可以看到右邊的基線跳起來了。
（左）將兩個(gè)元素放在一行中并設(shè)置vertical-align ，它們會(huì)使得行框的基線移動(dòng)到符合它倆的對(duì)齊規(guī)則之處，然后行框的高度也會(huì)隨之調(diào)整。（中）添加第三個(gè)元素，不超越行框的邊緣，既不影響行框的高度，也不影響基線的位置。（右）添加第三個(gè)元素，如果它超出了行框的邊緣，行框的高度和基線調(diào)整。在這種情況下，我們的前兩個(gè)元素也會(huì)跟著發(fā)生變化。
內(nèi)聯(lián)級(jí)元素底部的小間隙
列表項(xiàng)坐在基線上。下面的一點(diǎn)空間，是文本的基線以下預(yù)留的depth（在W3C規(guī)范中，一個(gè)字體的基線以上稱為characteristic height，基線以下稱為depth）。想要去掉這個(gè)depth空隙，有解決的辦法嗎？只要移動(dòng)基線的位置就可以，例如通過設(shè)置列表項(xiàng)目vertical-align: middle
水平垂直居中
<div class="box">
<div class="content">
自適應(yīng)垂直居中
</div>
</div>
html{
height:100%;
}
body{
height: 100%;
width: 100%;
}
.box{
display:inline-block;
text-align: center;
width:50%;
height:50%;
background-color:#e1e3cd;
overflow:hidden;
}
.box:after{
content:"";
display:inline-block;
height:100%;
vertical-align:middle;
}
.content{
vertical-align:middle;
background-color:silver;
display: inline-block;
width: 50%;
height:50%;
}
要將content水平垂直居中定位在box里，利用vertical-align是其中一種方法。原理是：vertical-align：middle（將元素的頂部和底部之間的中心點(diǎn)，對(duì)齊父元素的基線之上x-height的1/2之處（x-height為字母x的字符高度）。），content肯定是要垂直居中的，那只能修改行框的基線位置（注意：不是修改box的基線，box具有寬高，它里面的內(nèi)容可能會(huì)有多行，每行有各自的行框，box的基線已經(jīng)不會(huì)影響內(nèi)容的布局，但是box的基線還是會(huì)受里面內(nèi)容的影響（內(nèi)聯(lián)塊元素的基線是正常流中最后一個(gè)內(nèi)容元素的基線）），使其位于box的垂直中心位置。修改行框的基線，只要在box內(nèi)加一個(gè)高度為100%的空元素，然后設(shè)置vertical-align:middle，添加的元素已經(jīng)占滿整個(gè)行框高度，而只要移動(dòng)行框的基線，就可以滿足定位規(guī)則，所以行框的基線就被移動(dòng)到box垂直中心位置。content再按規(guī)則對(duì)齊到行框基線上就可以了。
