### line-height
div\span\p\h等能夠直接接收文字的標簽，在默認情況下，他們的高度由line-height決定，而不是font-size。
關于`height=line-height`實現垂直居中的做法，其實只設置line-height就可以，height根本就沒用。
*** 多行文本垂直居中于父級
```
<div class="father">
<div class="child">多行文本</div>
</div>
.father {
line-height: 120px; //必須是line-height不能是height
}
.child {
display: inline-block; //必須
line-height: 20px; //根據font-size適當調整
vertical-align: middle
}
```
:-: --------------------------分割線-------------------------------
```
<div class="father">
<span class="child">內容</span>
</div>
```
無論內聯元素line-height如何設置，最終父級的高度（如果沒指定高度的話）都是由數值大的那個line-height決定。比如：`father-line-height=20px; child-line-height=60px;`，最終father高度為60px。這是因為span標簽前面存在幽靈空白節點，它的高度由`father-line-height`決定。我們可以通過將child設為inline-block來去掉幽靈空白節點。
#### 使用line-height和vertical-align使圖片垂直居中
```
.father {
width;
height = line-height;
}
.father img {
display: inline-block;
vertical-align: middle
}
```
### vertical-align
line-height的百分比是相對于font-size計算的，vertical-align的百分比是相對于line-height計算的。vertical-align只能應用于inline、inline-block、inline-table和table-cell上。
水平垂直居中的：
```
.father {
height: 100px;
width: 100px;
display: table;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.child {
height: 50px;
width: 50px;
margin: 0 auto;
}
```
并不是child垂直居中了，而是middle垂直居中了，看似是child垂直居中于father了。
任意一個塊級元素，如果里面有圖片，該塊級元素如果沒有指定高度的話，那么塊級元素高度基本上都會比圖片高度高一點點。這是因為圖片前面有幽靈空白節點，我們用x來代表它。
看到了吧，x導致了空隙的產生。我們可以：
* 圖片設為inline-block
* 父元素line-height足夠小，比如0
* 圖片的vertical-align設為top、middle、bottom中的任意一個，只要不是默認的base-line就行。
*** 基于vertical-align實現的水平垂直居中（多用于彈出框）：
```
<div class="container">
<div class="dialog">
<div class="content"></div>
</div>
</div>
//全屏遮罩層
.container {
position: fixed;
top\right\left\bottom: 0;
background-color: rgba(0 ,0 ,0, 0.5);
text-align: center;
font-size: 0;
white-space: nowrap;
overflow: auto;
}
.container:after {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
//對話框
.dialog {
display: inline-block;
text-align: left;
font-size: 14px;
white-space-normal;
background-color: white;
padding: 20px;
}
//對話框內容
.content {
width\height: 100px;
}
```
