- 通过父盒子flex布局
father-box {
display: flex;
align-items: center;
justify-content: center;
}
- 通过子盒子margin和transform
box {
margin-top: 50%;
margin-left: 50%;
transform: translateX(-50%) translateY(-50%);
}
- 通过子盒子绝对定位
box {
width: 100px;
height: 100px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
- 文字类型直接通过改变父盒子line-height就可以实现居中
father-box {
height: 100px;
line-height: 100px;
text-align: center;
}