<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 hereWebkitブラウザで入力とボタンをシフトさせずに中央に揃えるにはどうすればいいですか？
Input Field Chrome and Firefox shows differentに関連する問題が見つかりました。ですから、あなたの質問は重複しているかもしれません。
Firefoxはボックスサイジングを使用しているため違いがあります：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
をあなたの問題は、両方の要素にボーダーボックスを適用することにより、固定することができ
入力は300ではなく303pxです。ボタンは300pxです。 border-boxプロパティは、両方とも300ピクセルになります。コンソールで確認できます。
オペラでcodepen.ioリンクを試しても、まだボタンがシフトしています。 –
コンソールで両方の要素の幅が同じかどうかチェックしましたか？ –
はい、両方とも同じ幅ですが、まだシフトがありますhttp://imgur.com/a/s4GaH –
私はあなたのためにcodepenを作成しました：http://codepen.io/anon/pen/zoergPこれをChrome 55でテストしました。左の小さなスペースがあるので、Webkitの問題です。 –