垂直居中

1、绝对定位

#示例 1
.container{
    height:100px;
    position:relative;
    background:red;
}

.inner{
    height:50%;
    width:50%;
    background:blue;
    position:absolute;
    margin:auto;
    left:0; right:0; bottom:0; top:0;
}

<div  class="container">
    <div class="inner">123</div>
</div>

示例截图

2、使用vertical-align

是水平对齐方式，利用居中对齐middle实现
只有一个元素属于inline或是inline-block（table-cell也可以理解为inline-block水平）水平，其身上的vertical-align属性才会起作用。

#示例 2
th, td{
    border:solid 1px gray;
    height:100px;
    vertical-align:middle;
}

示例截图

3、line-height = height

当只有一行的情况下，设置行高等于高度，里面的文字就会垂直居中显示。

#示例3
.container{
    height:100px;
    line-height:100px;
    background:red;
}
<div  class="container">
    文字居中显示
</div>