input top border disappears in windows chrome - html

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;
}
I want to know why the top border of the input disappears.I would be appreciated if someone answers me.
os: win10
browser: chrome 51.0.2704.84m
Thanks.

Answer 1

The problem is occurring because of transform: translate(-50%, -50%);
You can modify your css to removing transform
.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

This is a graphical glitch caused by your element being rendered on a sub-pixel by the translation transform (ie: 10.5px or the like).
There are some known solutions to fix this issue, though I haven't had much luck with them:
1) Use transform: transform: translate(-50%, -50%) perspective(1px);
2) On the parent element, add.
.parent {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
source: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
If you do not require support for older browsers, you may use flexbox:
https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/