方式一：用文本水平居中text-align: center和行高line-height实现

将两个嵌套的盒子，通过display将子盒子转为行内块显示模式，再用文本水平居中和行高获得最终子盒子的水平和垂直居中。（对齐方式的不同，需要给子盒子添加vertical-align: middle;）

方式二：子绝父相和外边距margin实现

父盒子设置相对定位，再把子盒子设置绝对定位，且绝对定位的top,bottom,left,right位移都设为0，然后将外边距margin属性值设置为auto。

方式三：利用子绝父相和左、上外边距实现

父盒子设置相对定位，再把子盒子设置绝对定位，且将子盒子设置top50%、left50%，然后再用外边距margin将子盒子分别向左、向上移动子盒子的一半（px）。

方式四：子绝父相+位移实现

父盒子设相对定位，子盒子绝对定位，并设置top50%、left50%，再用位移transform: translate属性;将子盒子分别设置x,y轴的-50%（子盒子反方向的一半）

方式五：flex布局实现

父元素设置display:flex;使其变成flex布局模式，然后在父元素中设置justify-content:center(主轴居中)，和align-items:center(侧轴居中)。