效果:
第一种:
.box1 {
width: 100px;
height: 200px;
border: 1px solid #000;
display: flex;
justify-content: center;
align-items: center;
}
.box1 img {
width: 50px;
}
第二种:
.box2 {
width: 100px;
height: 200px;
border: 1px solid #000;
position: relative;
}
.box2 img {
width: 50px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
第三种:
.box3 {
width: 100px;
height: 200px;
border: 1px solid #000;
vertical-align: middle;
display: table-cell;
text-align: center;
}
.box3 img {
width: 50px;
}