如何在不移动的情况下在 webkit 浏览器中居中输入和按钮？答案

【问题标题】：How to center inputs and button in webkit browsers without shift?如何在不移动的情况下在 webkit 浏览器中居中输入和按钮？
【发布时间】：2016-12-19 04:04:26
【问题描述】：

<style>
html {
    text-align: center;
}

input, button {
    width: 300px;
    height: 50px;
    margin-top: 10px;
}
</style>
<html>
<form>
    <input value="test" type="text">
    <br>
    <button>Test</button>
</form>
</html>

嘿，当我在 Microsoft Edge 中尝试此代码时，它可以正常工作，但是当我在 Webkit 浏览器（例如 Opera）中尝试时，按钮会发生变化。 enter image description here

【问题讨论】：

我为你创建了一个codepen：codepen.io/anon/pen/zoergP在Chrome 55上测试了这个，左边的小空间在那里，所以这是一个webkit的问题。

标签： html css

【解决方案1】：

我发现了与：Input Field Chrome and Firefox shows different 相关的问题。所以你的问题可能是重复的。

这是有区别的，因为 Firefox 使用 box-sizing: content-box on type="search" 输入，而 Chrome 使用border-box。

您的问题可以通过将边框框应用于两个元素来解决：

input, button {
width: 300px;
height: 50px;
margin-top: 10px;
box-sizing: border-box;
}

你可以在这里看到结果：http://codepen.io/anon/pen/QGYNWN

如果您检查您的代码，您会注意到输入是 303 像素而不是 300。按钮是 300 像素，应该是这样。 border-box 属性使它们都为 300 像素。您可以通过控制台确认。

【讨论】：

当我在 Opera 中尝试 codepen.io 链接时，按钮仍然移动。
您是否通过控制台查看两个元素的宽度是否相同？
是的，它们的宽度相同，但仍有偏移imgur.com/a/s4GaH