div元素居中时使用translate的坑
一个小坑:
在之前用css写块级元素的居中的时候,我经常使用的写法是下面这种写法
position:absolute;
left:50%;
top: 50%;
transform: translate(-50%,-50%);
这也是常见的方法之一。
但是今天发现该方法中的:
transform: translate(-50%,-50%);
这句的作用域不只为使用该方法的元素,还包括其子元素,因此很可能会改变该元素的子元素的位置属性,可能会出现子元素位置错位的问题
解决方法:
使用以下写法,居中块级元素
position:absolute;
left:0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
这种写法只针对使用该写法的块级元素的垂直居中定位,不会影响该元素中包含的其他子元素的位置