translate3d模糊问题(chrome)

元素垂直居中有如下的一种处理：
position: absolute;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
translate: translate3d(-50%,-50%，0);

但是如果元素的width和height为非偶数（上面的如果是101px，就会出现模糊问题chrome），（chrome）,其处理的最小单位为1px
暂时得出的结论是，如果需要用到上述定位方式，使用 translate(-50%, -50%) 这样写不会出现模糊问题 而非translate3d(-50%,-50%,0)

此处在chrome验证了一下（matrix(1, 0, 0, 1, -50.5, -50.5) 此处后两位是小数则会模糊）
有如下几种情况：
width、height均为
100.0px => matrix(1, 0, 0, 1, -50 -50) // 不模糊
100.1px => matrix(1, 0, 0, 1, -50, -50) // 不模糊
100.2px => matrix(1, 0, 0, 1, -50, -50) // 不模糊
。。。
100.5px => matrix(1, 0, 0, 1, -50.5, -50.5) // 开始出现模糊
。。。
100.9px => matrix(1, 0, 0, 1, -50.5, -50.5) // 模糊
101px => matrix(1, 0, 0, 1, -50.5, -50.5) // 模糊

由此可见，chrome采用的是四舍五入的方式
100.4 => 100 => 100/2 => 50
100.5 => 101 => 101/2 => 50.5 // 出现模糊

网上查到是如下差异，可以参考
1、四舍五入的浏览器：IE8、IE9、Chrome、Firefox
2、直接取整的浏览器：IE7、Safari

另外，字体就不用想着用小数了
因为有这样一句话，偶数最佳，单数可以，小数禁止

今天的文章translate3d模糊问题(chrome)分享到此就结束了，感谢您的阅读。