在HTML/CSS中实现居中对齐的第二种方法
最编程
2024-01-26 07:06:40
...
子绝父相先定位子盒子： 使用子绝父相时，父盒子要处于相对定位状态，而子盒子要设置为相对定位。定位后确定位置有两种方法。
###法一:
top:50%;left:50%;
transform:translate(-50%,-50%);
注意:
使用top.和left定位时是以上边线和左边线定位的,所以,要使用位移将盒子拉回自身一半,达到居中的效果.
###法二:
margin-left:(自身宽度盒子的一半,但是不能用百分比);
margin-top:(同样也是盒子高度的一半);
注意:
在使用margin值时,不能使用百分比,因为margin值是相对于父盒子来移动的,所以只能写盒子宽高一半的像素单位来移动子盒子于父盒子的相对位置.