<div, class="father">
<div class="son"></div>
</div>
//第一种
.father{
position:relative;
width: 500px;
height:500px;
background-color: red;
}
.son{
position:absolute;
margin:auto;
top:0; left:0; bottom:0;right:0;
width: 300px;
height:300px;
background-color: blue;
}
//第二种
.father{
position:relative;
}
.son{
margin:auto;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
//第三种
.father{
display:-webkit-flex;
align-items:center;
justify-content:center;
}
.son{
margin:auto;
}
//第四种，用表格布局
<div class="pe">
<div class="he">
<div class="she"></div>
</div>
</div>
.pe{
display:table;
width:50%;
height:30%;
position:absolute;
}
.he{
display:table-cell;
vertical-align:middle;
text-align:center;
}
.she{
width:50%;
height:30%;
display:inline-block;
}
//第五种，行内块元素
<div class="wrap" >
<b class="vamp"></b>
<div class="test">行内块元素</div>
<div>
.vamp{
width:0；
height:100%;
vertical-align:middle;
}
.test{
background:"blue";
display:inline-block;
}
