「左右」の中央寄せは頻繁に使いますが、「上下」や「上下左右」の中央寄せとなると一瞬戸惑う...という人は結構いるんじゃないでしょうか?今回はテキストやブロック要素など、様々なコンテンツを中央寄せするテクニックを紹介します。最初に書いておきますが、この記事はdisplay:flexを使った中央寄せのテクニックがメインです。Flexboxがよく分からない!という方はこちらの記事を軽く読んでおいたほうが幸せになれます。左右の中央寄せこれは簡単。center;を指定するだけです。flex;でFlexコンテナ化します。center;で中央に指定。これで上下中央にテキストが表示されます。center;を追加するだけでOK。auto;を指定すると、左右の余白が自動的に計算されて中央に配置されます。auto;}上下の中央寄せテキストの上下中央寄せと同じく、Flexを使えば簡単です。#e74c3c;}上下左右の中央寄せこれもテキストの上下左右中央寄せと同じ方法でOKです。auto;を使うという、馴染み深い手法を使うのが一般的です。flex;を使う、というのが一番簡単ですね。auto;を使うのが主流だった気がするんですが、それと比べコードも短く綺麗だし、何より理解しやすいです。【2017年版】CSSのみで三角形を作る方法を解説するよ|ついでに台形や扇形も作ってみるよAuthor名前:Leo26歳にしてようやくフリーターから脱却してWeb屋さんになった人。ライターみたいな事もするよ。あと雪国に住んでるけどバイクが好き。特技は後先考えずに突撃して自滅することです。