div 元素居中使用translate的坑

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;

这种写法只针对使用该写法的块级元素的垂直居中定位，不会影响该元素中包含的其他子元素的位置