CSS
UI

flex でのセンタリングメモ

display: flex、便利なので何気なく使っている気がします。

人が組んでいるのをちょこちょこ触って気づきましたが、

Web サービスの UI の位置をセンタリングする場合、


  • align-items: center

  • justify-content: center

でセンタリングするより、

内部要素に margin: auto を当てた方が使い勝手が良いです。

flex 系のプロパティでセンタリングした物は、

画面サイズを小さくしたり要素を大きくして見切れるようにすると、

上側と左側へのスクロールができなくなります。

内部でスクロール出来るか出来ないかだけの違いですが、

何気にウィンドウ系な UI を配置する場合、表示する術が無いと辛いケースが。

flex のプロパティを使いこなせば普通に回避できそうな気もしますが、

割とシンプルに回避できるので margin: auto がお勧めです。

[追記:2018年8月30日]

IE で margin: auto でのセンタリングが効かない様なので、

IE 対応が必要な物には利用しないほうが良いです。