Content ambiguity occurs when using transform:translate()

 <div class="tancc" v-if="ifshow">
      <div class="main">
           <button class="close" @click="close()">X</button>
           <ul>
               <li>
                  <label for="name"> full name ：</label>
                  <input type="text" id="name">
               </li>
               <li>
                  <label for="age"> Age ：</label>
                  <input type="text" id="age">
               </li>
               <li>
                  <label for="address"> Address ：</label>
                  <input type="text" id="address">
               </li>
          </ul>
       </div>
 </div>

 .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;
    }

The content is obviously vague , Get rid of transform after ：

Turned out to be transform: translate(-50%,-50%) Influence

reason ：translate(-50%,-50%) Decimal numbers appear in the calculation result

test height: from 201.0~201.9





test result ： The closer the decimal part is 1, Input box border The clearer
in other words ,translate(-50%,-50%) The sharpness is the highest when the calculation result is an integer

 resolvent ：
1. When the width and height of the element are in absolute units 
    Elements weidth and height Set to even 
2. When the width and height of elements are relative units 
    The calculation result is uncertain , Use display:flex or display:table To achieve the horizontal and vertical centering effect