如何垂直居中一个元素

单行内联元素垂直居中

利用line-height与height相同即可

<div id="box">
     <span>单行内联元素垂直居中。</span>。
</div>
<style>
 #box {
    height: 120px;
    line-height: 120px;
    border: 2px dashed #f69c55;
    }
</style>

多行内联元素垂直居中

• 利用flex布局
  利用flex布局实现垂直居中，其中flex-direction:column定义主轴方向为纵向。

<div class="parent">
    <p>Dance like nobody is watching, code like everybody is.
    Dance like nobody is watching, code like everybody is.
    Dance like nobody is watching, code like everybody is.</p>
</div>
<style>
    .parent {
        height: 140px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border: 2px dashed #f69c55;
    }
</style>

• 利用表布局（table）
  利用表布局的vertical-align:middle可以实现子元素的垂直居中

<div class="parent">
    <p class="child">The more technology you learn, the more you realize how little you know.
    The more technology you learn, the more you realize how little you know.
    The more technology you learn, the more you realize how little you know.</p>
</div>
 <style>
    .parent {
        display: table;
        height: 140px;
        border: 2px dashed #f69c55;
    }
    .child {
        display: table-cell;
        vertical-align: middle;
    }
</style>

块级元素垂直居中

使用absolute+负margin（已知高度宽度）
通过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半

<div class="parent">
    <div class="child">固定高度的块级元素垂直居中。</div>
</div>
.parent {
   position: relative;
}
.child {
   position: absolute;  
   top: 50%;
   height: 100px;
   margin-top: -50px;
}

• 使用absolute+transform
  当垂直居中的元素的高度和宽度未知时，可以借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中

<div class="parent">
    <div class="child">未知高度的块级元素垂直居中。</div>
</div>
.parent {
   position: relative;
}
.child {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
}

• 使用flex+align-items
  通过设置flex布局中的属性align-items，使子元素垂直居中

<div class="parent">
    <div class="child">未知高度的块级元素垂直居中。</div>
</div>
.parent {
    display:flex;
    align-items:center;
}

• 使用table-cell+vertical-align
  通过将父元素转化为一个表格单元格显示（类似<td>和<th>），再通过设置vertical-align属性，使表格单元格内容垂直居中

<div class="parent">
  <div class="child">Demo</div>
</div>
<style>
  .parent {
    display: table-cell;
    vertical-align: middle;
  }
</style>