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

 <div class="tancc" v-if="ifshow">
      <div class="main">
           <button class="close" @click="close()">X</button>
           <ul>
               <li>
                  <label for="name">姓名：</label>
                  <input type="text" id="name">
               </li>
               <li>
                  <label for="age">年龄：</label>
                  <input type="text" id="age">
               </li>
               <li>
                  <label for="address">地址：</label>
                  <input type="text" id="address">
               </li>
          </ul>
       </div>
 </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

 .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;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

内容出现了明显的模糊，去掉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来实现水平垂直居中效果
1
2
3
4
5