CSS：上下中央揃えはflexを使おう。

実装していきましょう。

まずは外側の要素を配置してみます。CSSでテキトーに高さと枠線をつけておきました。

<div class = "area"> </div>

.area { width:80%; height:20em; margin:0 auto; border:solid 1px; }

ここに以下のCSSを追加。

.area { 「「３width:80%; height:20em; margin:0 auto; border:solid 1px; 」」 「「３/*　追加　*/」」 「「１display:flex; justify-content:center; align-items:center;」」 }

おわり。

あれこれと苦悩の末に活路を見い出し目的を達成するタイプの方は、すいません、こんだけです。


「area」の中に何か書いてみます。

<div class = "area"> <p style = "font-size:2em;"> 「「１何か」」 </p> </div>

はい、上下左右にセンタリングできました。
検証を深めるべく、次は画像を置いてみますか。

<div class = "area"> <p> 「「１」」 </p> </div>

はい。

〜こんな感じで、親要素のCSSに３行のコードを追加するだけで、その内部に記述されたものが上下左右に中央揃えさせることができるんですね ♪

とは言え、折角このページを訪問していただいた（ありがとうございます！）方には理解を深めていただきたいので、次のセクションでプロパティの解説をさせてもらいます。

解説。

.area2 { display:flex; }

親要素に「display : flex」を指定すると、子要素の並び方向が定められます。
デフォルトでは「水平方向に左から右へ」です。この並び方向は主軸とよばれています。

justify-content:flex-start;「「３　/*初期値*/」」

このまま子要素を追加していくと、主軸に対して左寄せで順次並べられていきます。
これは「主軸に対して子要素をどのように配置するか」を定める justifiy-contentが初期値の「flex-start（主軸の最初から順番に）」に指定されているからです。

justify-content:「「１center」」;

justify-contentには主軸に対して真ん中寄せにする、「center」という値を定めることができます。

これが先程使った「左右中央寄せ」の方法です。

今度は「並び方向に垂直な成分」、現在の状態でいうと縦方向、こちらは「交差軸」と呼ばれています。
この交差軸への配置をコントロールするのが、align-itemsプロパティです。

align-items:stretch「「３　/*初期値*/」」

align-itemsの初期値は「stretch」です。
これは「子要素を交差軸に合わせて伸縮させる」という指定です。

ただし子要素のheightが明確に指定されていた場合、伸縮せずに「交差軸」の始点に揃えて配置されます。

align-items:「「１center」」

このalign-itemsにおいても「center（中央揃え）」が指定できます。
交差軸に対しても中央に揃えることができました。

主軸に対する「justify-content」、交差軸に対する「align-items」。両方を「center」にすることで、領域内の上下左右中央揃えを実現しています。

軸に合わせる。

flexボックスを使った要素の上下左右中央寄せ。とても簡単にできてしまいました。
この方法を知る前は子要素の外側(margin,paddingなど)を調整することばかり考えていましたが、「軸」に合わせるという逆の発想。感銘。

今後どんどん使っていきたいと思います。ではまた〜 ♫