はじめに
コードを書いてばかりだと記憶に定着しないので、実際に言葉にして自分の失敗談を中心に書いてみたいと思います。
実際にQiitaで初めて記事を書くんだけど、そこは多めに見てほしいです。
今回は上下左右の中央寄せの話です。
実際にやらかした失敗
例えば、ボタンを作成してるとボタンの内側の文字を上下左右の中央寄せで書くことが多いと思います。
実際に僕がやらかした失敗として、ボタンの内側の文字をpaddingを用いて力技で上下左右にしてしまいました。
僕が知ってる中央寄せで使いこなせるプロパティはtext-align:center;くらいしかなかったです。
これだと上下に中央寄せできないですね。
上下に中央寄せするのにpadding使うのは力技すぎて笑ってしまう。
今思うと、「なんて非効率なことをしたんだろう…」って思います。
解決策
そんな恥ずかしい失敗をしてしまったからこそ、自分がどうやって解決したかをまとめておきます。
paddingの力技を用いずともfloatの上位互換と言っても良いくらい便利なflexで解決できてしまいます。
それが以下のコードのように書けば綺麗に上下左右に中央寄せできます。
index.html
<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><linkrel="stylesheet"href="style.css"><title>ボタン</title></head><body><divclass="all"><divclass="button"><h2>ボタン</h2></div></div></body></html>style.css
.all{display:flex;justify-content:center;}.button{width:300px;height:40px;display:flex;align-items:center;justify-content:center;border:1pxsolid#000000;border-radius:25px;}ボタンの枠線を中央寄せするにはallクラス（親要素）にdisplay:flex;とjustify-content:centerを。
ボタンの文字を中央寄せはbuttonクラス（子要素）にdisplay:flex;とjustify-content:center;align-items:center;を。
これでボタン全体がブラウザで綺麗に中央寄せになり、文字が綺麗に上下左右になりました。
終わりに
flexboxは主に横並びのときに使う便利なプロパティですが、中央寄せするときでも使える便利です。
flexboxの奥深さを改めて気づいた一日でした。