方法一:利用定位(子觉父相)+margin
具体操作步骤:
1.利用子绝父相,分别给父盒子设置相对定位.给子盒子设置绝对定位,然后子盒子利用绝对定位设置left:50%;以及top50%;
2.再利用margin设置左移子盒子自身宽度的一半(margin-left:取值:子盒子宽度的一半:),上移自身高度的一半(margin-top:取值:子盒子宽度的一半:)
注意点:margin设置百分比是以父盒子宽高为基准移动,若父盒子宽高发生变化,则margin值也需要同时进行改变
方法二:利用定位(子绝父相)+位移
具体操作步骤:
1.利用子绝父相,分别给父盒子设置相对定位.给子盒子设置绝对定位,然后子盒子利用绝对定位设置left:50%;以及top50%:
2再利用位移transform: translate(-50%, -50%);让子盒子左移以及上移自身宽高一半的数值 注意点:位移设置百分比是以子盒子自身宽高为基准进行移动,所以此处设置百分比,后续父盒子宽高若发生变动,不会影响子盒子的垂直水平居中效果
