実は超簡単だった!Flexboxを使って画面中央に表示させる方法

画面の中央に表示させたり、要素を上下左右のど真ん中に表示させたいときって結構あります。

いろいろな方法がありますが、その中でも一番カンタンな方法を紹介します。
もちろんIE11対応してます。


以下のようなhtmlコードがあるとします。


このコードをブラウザで確認すると通常どおり左上に文字が表示されると思います。

それではこの文字を中央に表示させるように親要素のCSSにコードを追加してみます。

Flexboxを使えばものすごく簡単に中央表示ができます。
マージンを頑張って設定したりしなくて済みますし、コードの量が減ってスッキリしますね。
ぜひこのテクニックを活用してみてください。