关于垂直居中又有什么需要注意的呢？

书接上文，本次我们来谈谈怎样根据需求来做到合适的垂直居中。

1.文字居中-line-height;

在文字垂直居中的时候我们需要引入一个概念：行高；行高可以定义文字在某个高度居中排列；真好，自带居中属性。但往往，一个元素，一个元素顶部或底部距文字有个段前端后距离，单排文字还好，多排文字的时候改怎么办呢？别急，盒模型里边儿有个padding区域，而行高是在content区内计算，那么我们可以直接用上下的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;的感想：

官方解释为：该属性定义行内元素的基线相对于该元素所在行的基线的垂直居中对齐。
 ？？？好像很简单的样子，直接给元素加上这条样式就能居中了吧。实则不然。当你慌慌张张写上去，你会发现，要不他不搭理你，要吗他懒洋洋的搭理你（有变化，但可能仍不居中）。

html:
<div class="box">
    <span>我需要后面的图片在居区块儿中居中显示</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