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>
