chrome系ブラウザで、flexboxによる上下左右中央指定がずれる #CSS

よく知られている、flexboxを利用した上下左右のセンタリング

.border
  .chip

.border {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 110px;
  height: 110px;
  background-color: aqua;
  margin-bottom: 50px;
}

.chip {
  width: 100px;
  height: 100px;
  background-color: red;
}

このように書くと、justify-content: center;とalign-items: center;によって、子要素が上下左右中央になるのはよく知られたテクニックだと思います。

子要素(または親要素)の大きさが奇数になる時に、chrome系ブラウザで中央からずれる

こういうスタイルを適用するとどうでしょうか。上のスタイルの、widthとheightのみを変更したものです。

.border {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  background-color: aqua;
  margin-bottom: 50px;
}

.chip {
  width: 17px;
  height: 17px;
  background-color: red;
}