盒子没有固定的宽和高
利用transform
在需要居中对齐的块中首先采用绝对定位,其父盒子采用相对定位。然后transform:translate(-50%,-50%);left:50%;top:50%
采用flex布局
父盒子采用flex布局。给父盒子加上display:flex;justify-content:center;align-items:center
盒子有固定的宽和高
经典做法
给需要居中的盒子加上left:50%;top:50%; margin-left:-自身宽度的一半;margin-top:-自身高度的一半
非常规的做法
将需要居中的盒子绝对定位,其父盒子采用相对定位。然后left:0;top:0;top:0;bottom:0;margin:auto;