转换Chrome中的偏移输入边框

Question

我正在创建一个网页，我需要在页面中央水平和垂直对齐div和input。但是，当我测试代码时，它呈现了一些我没想到的东西。

body {
  background: white;
  margin: 0;
  padding: 0;
  font-family: Source Sans Pro;
  line-height: 160%;
}

div {
  position: absolute;
  background: #E6E6E6;
  padding: 15px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

<div><input /></div>

我在Chrome和Firefox中测试了它，但这个错误只发生在Chrome中。这有什么原因，我该如何解决？

Answer 1

默认情况下，input元素的样式为inset：

请改为尝试：

input { border: 1px solid gray; }

body {
  background: white;
  margin: 0;
  padding: 0;
  font-family: Source Sans Pro;
  line-height: 160%;
}

div {
  position: absolute;
  background: #E6E6E6;
  padding: 15px;
  left: 50%;
  top: 50%;
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
}

<div><input /></div>