使用transform:translate()出现内容模糊问题

 
"tancc" v-if="ifshow">
      
"main">
           "close" @click="close()">X
           

               

                  "name">姓名：
                  "text" id="name">
               
               

                  "age">年龄：
                  "text" id="age">
               
               

                  "address">地址：
                  "text" id="address">
               
          
       
 

 .tancc{
        width:100%;
        height:100%;
        position:fixed;
        background: rgba(0, 0, 0, 0.2);
        top:0;
        left:0;
        z-index: 200;
    }
    .tancc .main{
        width:75%;
        height:67%;
        color:#666;
        background: #fff;
        margin:0 auto;
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        text-align:center;
    }

内容出现了明显的模糊，去掉transform之后：

原来是transform: translate(-50%，-50%)的影响

原因：translate(-50%,-50%)计算结果出现小数

测试height:从201.0~201.9





测试结果：小数部位越接近1，输入框border越清晰
也就是说，translate(-50%,-50%)计算结果为整数时清晰度最高

解决方法：
1.元素宽高为绝对单位时
   元素weidth和height设为偶数
2.元素宽高为相对单位时
   计算结果不确定，使用display:flex或display:table来实现水平垂直居中效果