input top border disappears in windows chrome

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