方式一:定位+margin
操作步骤:
利用子绝父相,分别给父盒子设置相对定位,给子盒子设置绝对定位
1.让子盒子往右往下移动父盒子宽高的一半(left: 50%,top: 50%)
2.利用margin设置子盒子往左往上移动盒子自身宽高的一半{margin-left:子盒子自身宽度的一半(值为负数);margin-top:子盒子自身高度的一半(值为负数)}
注意:若子盒子宽高发生变化,则margin值也需要同时进行更改
方式二:定位+位移
操作步骤:
利用子绝父相,分别给父盒子设置相对定位,给子盒子设置绝对定位
1.让子盒子往右往下移动父盒子宽高的一半(left: 50%,top: 50%)
2.利用位移transform设置子盒子往左往上移动盒子自身宽高的一半( transform: translate(-50%, -50%);)
注意:位移设置百分比是以子盒子自身宽高为标准进行移动,盒子宽高发生变化,不会影响盒子垂直水平居中.
