实现水平垂直居中
HTML:
<div class="father">
<img src="./icon_play.png">
</div>
CSS:
<style>
body{
margin: 0px;
position: absolute;
height: 100%;
width: 100%;
}
.father{
border: solid 1px gray;
height: 50%;
width: 90%;
margin-left: 5%;
}
.father img{
height: 50%;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
实现效果:
手机:
仅实现水平居中:
.father img{
height: 50%;
position: relative;
left: 50%;
transform: translate(-50%, 0);
}
效果: