已知宽高实现盒子水平垂直居中

.box {border: 1px solid #00ee00;height: 300px;position:relative;}.box1 {width: 200px;height: 200px;border: 1px solid red;position:absolute;top:50%;left:50%;//margin给上和左都给负的自身宽高的一半,就能达到垂直水平居中的效果。margin:-100px 0 0 -100px; }

宽高不定实现盒子水平垂直居中

.box {border: 1px solid #00ee00;height: 300px;position:relative;}.box1 {width: 200px;height: 200px;border: 1px solid red;position:absolute;top:50%;left:50%;transform: translate(-50%, -50%);}