第一种
.parent{position:relative}
.son{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
第二种
.parent{position:relative}
.son{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
第三种
.parent{
display:flex;
justify-content:center;
align-items:center;
}
第四种
.father{
height: 100vh;
width: 100vw;
display: grid;
}
.son{
display: inline-block;
align-self: center;
justify-self: center;
}
第五种
.father{
height: 100vh;
display: -webkit-box;
-webkit-box-align: center;
-webkit-box-pack: center;
}
第六种
.father{
display: table-cell;
vertical-align: middle;
}
.son{
margin: auto;
}
第七种
添加一个span元素或其他元素
<div class="father">
<span></span>
<div class="son"></div>
</div>
.father{
text-align: center;
}
span{
display: inline-block;
vertical-align: middle;
height: 100%;
}
.son{
display: inline-block;
vertical-align: middle;
}
第八种
.father {
display:flex;
}
.son {
margin: auto;
}
第九种
.father {
display: grid;
place-items: center;
}
.son {
display: inline-block;
}