盒子水平垂直居中方法

*{padding: 0; margin: 0; list-style: none;}

.box01{width: 200px; height: 200px; background:blue; color:#fff;

position:absolute;

left: 50%; top: 50%;

margin-left: -100px;

margin-top: -100px;

}

.box02{background:#f10180; color:#fff; font-size:30px; padding: 20px;

position:absolute;

left: 50%;

top: 50%;

transform:translate(-50%,-50%);

}







已知知宽高的小水平垂直都居中盒子

未知宽高的小盒子水平垂直都居中