方案一：transform:translate(-50%,-50%);
<style type="text/css">
.wrap{
border: #000 1px solid;
position: relative;
}
.box{
border: 1px solid red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
</style>
<div class='wrap'>
<div class='box'>哈哈</div>
</div>
方案二：弹性盒模型
<style type="text/css">
.wrap{
border: #000 1px solid;
display: flex;
justify-content: center;
align-items: center;
}
</style>
方案三：table-cell
<style type="text/css">
.wrap{
border: #000 1px solid;
display: table;
}
.box{
border: 1px solid red;
display: table-cell;
vertical-align: middle;
text-align: center;
line-height: 1;
}
</style>
