css盒子居中

1.已知父盒子和子盒子宽高 可用方法很多，设置margin/padding/定位都行 2.已知父盒子宽高，不知道子盒子宽高 首先给父盒子添加一个辅助对齐的子盒子 .father{ text-align：center； } .son{ display：inline-block； verticle-align：middle； } 辅助定位盒子 .fuzhu{ display：inline-block； height：100%； width：0； vertical-align：middle； } 3.父盒子子盒子宽高均不知 .father { position：relative； } .son { position：absolute； left：50%； top：50%; transform:translate(-50%,-50%); } 例三 源代码 * { padding: 0; margin: 0; } body, html { height: 100%; } .father { width: 100%; height: 100%; position: relative; background-color: #f00; } .son { width: 50%; height: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #0f0; }

4.弹性布局也可实现
.father {
display:flex;
height:100vw;
justify-content:center;
}
.son {
width:25vw;
height:25vw;
align-self:center;
}