More than 5 years have passed since last update.

flexを使って要素を手っ取り早く縦横の中央寄せにしたい

Posted at 2018-10-09

こんな感じでDOM要素のど真ん中に寄せたい時に、毎回忘れそうになるので備忘録もかねて

flexバンザイ

flex.html

<div style="width: 100px;height: 100px;display: flex;align-items: center;justify-content: center;background-color: antiquewhite;">
    test
</div>

displayをflexに、align-items、justify-contentの両方ともにcenterを指定してあげればOKです。
昔はvertical-alignとかで頑張ったなぁ