вход верхняя граница исчезает в окна хром

Question

code

<div class="center"> 
    <div class="parent"> 
    <label>姓名</label> 
    <input type="text"> 
    </div> 
</div> 


.center { 
    transform: translate(-50%, -50%); 
    position: absolute; 
    top: 50%; 
    left: 50%; 
} 

.parent { 
    padding: 8px 0; 
} 
label { 
    margin-left: 20px; 
} 
input { 
    width: 100px; 
    height: 41px; 
} 

Я хочу знать, почему верхняя граница входного disappears.I бы признателен, если кто-то ответит мне.

ОС: win10

браузер: хром 51.0.2704.84m

Спасибо.

Answer 1

Проблема возникает из-за transform: translate (-50%, -50%);

Вы можете изменить свой CSS для удаления преобразования

.center { 
    position: relative; 
    width: 100%; 
} 
.parent { 
    padding: 8px 0; 
    margin: 15% auto; 
    width: 100px; 
} 
label { 
    margin-left: 20px; 
} 
input { 
    width: 100px; 
    height: 41px; 
} 

Answer 2

Это графический глюк вызван ваш элемент, оказываемые на субпикселе трансляции преобразования (т.е. 10.5px или т.п.).

Есть некоторые известные решения, чтобы решить эту проблему, хотя я не очень везло с ними:

1) Используйте transform: transform: translate(-50%, -50%) perspective(1px);
2) На родительском элементе, доб.

.parent { 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
} 

Источник: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Если вам не нужна поддержка старых браузеров, вы можете использовать Flexbox: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/