input[type="number"] のテキストが中央揃えにならない

事象

下記のような width が狭い input[type="number"] に text-align: center; を指定しても中央揃えにならない。

<input class="input-number" type="number" min="0" max="9" />

.input-number {
  text-align: center;
  min-width: 4rem;
  max-width: 100%;
}

サンプル(調整前)

原因

スピンボタン分、テキストの位置がずれてしまっている

対処法

• inputにスピンボタン分のpaddingを設ける
• スピンボタンの位置をpositionで指定する

.input-number {
  text-align: center;
  position: relative;
  padding: 0 1rem; // スピンボタン分の横padding 値は適宜調整してください
  
  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    height: calc(100% - 0.2rem); // スピンボタンのheight 値は適宜調整してください
  }
}

サンプル(調整後)