書接上文类垦，本次我們來談談怎樣根據需求來做到合適的垂直居中狈邑。

1.文字居中-line-height;

在文字垂直居中的時候我們需要引入一個概念：行高城须；行高可以定義文字在某個高度居中排列；真好米苹，自帶居中屬性糕伐。但往往，一個元素驱入，一個元素頂部或底部距文字有個段前端后距離赤炒，單排文字還好，多排文字的時候改怎么辦呢亏较？別急莺褒，盒模型里邊兒有個padding區(qū)域，而行高是在content區(qū)內計算雪情，那么我們可以直接用上下的padding撐開段前段后距離即可遵岩。

html:
<p class="p">這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字</p>
css:
.p{
    margin:50px;
    padding:100px 0;
    line-height: 50px;
    background-color: #66ccff;
}

line-height垂直居中.png

等等，別著急巡通。我猜你可能想用在a標簽上尘执，想把它變成一個大小可控的按鈕。哈哈哈宴凉，在這里很負責的告訴你誊锭，行內元素不支持上下的padding。上下的margin支持也是有問題的弥锄。

2.關于vertical-align:middle;的感想：

官方解釋為：該屬性定義行內元素的基線相對于該元素所在行的基線的垂直居中對齊丧靡。
?？籽暇？温治？好像很簡單的樣子，直接給元素加上這條樣式就能居中了吧戒悠。實則不然熬荆。當你慌慌張張寫上去，你會發(fā)現绸狐，要不他不搭理你卤恳，要嗎他懶洋洋的搭理你（有變化，但可能仍不居中）寒矿。

html:
<div class="box">
    <span>我需要后面的圖片在居區(qū)塊兒中居中顯示</span>
    ![](img/6188f636afc379319f87f.jpg)
</div>
css:
img{
    border: 0;
    vertical-align: top;
    /* 清除圖片的默認樣式突琳，行內塊元素不設置垂直對其方式，底部有間隙 */
}
.box{
    margin:50px;
    height:300px;
    background-color: #66ccff;
}
.box span{
    vertical-align: middle;
}
.box img{
    height:200px;
    vertical-align: middle;
}

vertical-align：middle猜想.png

這是因為劫窒，vertical-align設置的是行內元素本身基線對齊的方式本今。本身？基線對齊~！講到這兒你應該明白了冠息，好像跟父級元素都沒扯上關系挪凑，那自熱不能再塊元素中居中咯？
?也還是有辦法逛艰，如有某個行內元素跟父級元素一樣高躏碳，行內元素基線對齊方式為中線對齊，那之后排列的行內（塊）元素不就居中咯散怖；

/* 現在我們給文字加上父級高度的行高 */
.box span{
    line-height: 300px;
    vertical-align: middle;
}

vertical-align：middle垂直居中.png

?如果你有寫過表格布局菇绵，有些時候你一定非常喜歡表格里邊的內容會自動水平和垂直居中；其實利用table-cell的特性镇眷，你也可以很簡單的做到這一點：

html:
<div class="box">
    ![](img/6188f636afc379319f87f.jpg)
</div>
css:
.box{
    display: table-cell;
    width:500px;
    height:300px;
    background-color: #66ccff;
    text-align: center;
    vertical-align: middle;
}
.box img{
    height:200px;
}

display：table-cell垂直居中.png

?這次需要把vertical-align:middle;設置給父級元素了喲咬最；

Tip：

• 在IE6，7下欠动，不允許把其他類型的元素設置為table-cell;

3.使用position:absolute;來定位垂直居中：

之前咱們做過相對定位和絕對定位的水平居中永乌，掌握其用法之后，在垂直居中布局也是大同小異具伍。

相對定位：

html:
<div class="wrap">
    <div class="box">這是一個相對定位的塊元素</div>
</div>
css:
.wrap{
    height:500px;
    border:3px solid #000;
    /* 阻止margin傳遞 */
    background-color: #ccc;
}
.box{
    position: relative;
    left: 50%;
    top:50%;
    margin-left: -200px;
    margin-top: -150px;
    width:400px;
    height:300px;
    background-color: #66ccff;
}

Tip：

• 注意margin傳遞翅雏；

  
  
  position：relative垂直居中.png

絕對定位：

html:
<div class="wrap">
    <span class="span">這是一個絕對定位的內嵌元素</span>
</div>
css:
.wrap{
    position: relative;
    height: 500px;
    background-color: #ccc;
}
.span{
    position: absolute;
    left: 50%;
    top:50%;
    margin-left: -200px;
    margin-top: -150px;
    width:400px;
    height:300px;
    background-color: #66ccff;
}

position：absolute垂直居中.png

3.彈性盒模型實現垂直居中：

通過文檔流實現：

html:
<div class="wrap">
    <div>彈性盒模型的子元素1</div>
    <div>彈性盒模型的子元素2</div>
</div>
css:
.wrap{
    display: flex;
    flex-direction: column;
    /* 改變主軸方向為垂直(從上到下) */
    justify-content: center;
    /* 主軸對齊方式為居中 */
    height:500px;
    background-color: #ccc;
}

display：flex垂直居中1.png

通過margin:auto;實現：

html:
<div class="wrap">
    <div>彈性盒模型的子元素1</div>
    <div>彈性盒模型的子元素2</div>
</div>
css:
.wrap{
    display: flex;
    height:500px;
    background-color: #ccc;
}
.wrap div{
    margin:auto 0;
    width:500px;
    height:200px;
    border:thin solid #000;
    background-color: #66ccff;
}

display：flex垂直居中2.png

Tip：

• display:flex;當前兼容性不是很好；
• 只有在彈性盒模型里人芽，margin垂直方向才能取值auto望几；
  Demo:https://github.com/MornMartin/layout-vertically-middle