CSS transform: translate(-50%,-50%)导致的像素模糊问题解决办法

最近写项目遇到一个问题，我写了一个弹窗，因为宽度高度是动态的，不是固定的，所以有时候里面的像素会模糊，导致展示出来的效果是糊的
原因：像素是基数的时候，用这个方法就会糊掉，偶数的时候不会
解决方案如下：

<div class="tire">
  <div class="tanchuang">
     弹窗内容区域
  </div>
</div>

<style>
  .tire{
    position:fixed;
    display:flex;
    justify-content: center;
  	align-items: center;
    top:0;
    left:0;
    bottom:0;
    right:0;
    z-index:99;
   }
</style>

总结：遇到这个问题的话，可以不要去用定位，可以给他的父元素加一个弹性布局flex，然后让里面的内容上下，左右都居中