More than 5 years have passed since last update.

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

Last updated at 2016-08-29Posted at 2016-08-29

よく知られている、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;
}