一 .利用定位

子绝父相 子设置top50%,left50%,margin-top:-子的一半,margin-left:-子的一半

二.利用margin:auto

子绝父相:子:四个方向都为0,margin:auto

三.display:table-cell

父级设置:display:table-cell;certical-align:middle;text-align:center 子级设置:行内块元素(dispaly:inline-block)

四 .flex布局

父级设置:dispaly:flex;justify-content:center;align-items:center

五 .单纯的计算父子盒子的距离

六.利用transform

子绝父相 子设置top50%,left50%;transform:translate(-50%,-50%)