Flexbox 12 (アイテムの中の要素の縦方向の中央寄せ)

まず、下記のように子アイテムを用意

これを内包する親領域のフレックスボックスを作成
（width: 320px;height: 160px;）

子アイテムのマージンを「 auto 」にすると、子アイテムが中央揃えになる。

※親要素の高さを指定しない場合は、上下の位置は上下の「margin」「padding」の設定となるだけなのであまり悩むことはないのですが・・・

親要素の高さが指定されている場合は、Flexbox ならば、マージンを auto にしておけば、余白が自動調整される＝上下左右とも中央に均等に寄るようになるわけです。

---

Flexbox では、左右方向の位置揃えは、「 text-align 」ではなく、「 justify-content 」を使うとより自由度が高い設定が可能となります。

「 space-between 」を指定 （※マージンの上下はautoを指定） .parent {justify-content:space-between;} .parent .item{margin-top:auto;margin-bottom:auto;}

justify-contentオプション

---

おや、しかし、ここで問題が。子アイテムの位置は上下左右とも中央に寄りましたが、中のテキストが端に行ってます。これも中央にもってきたい。

(ここでまた、「texst-align 」「vertical-align」が効かない問題が出てくる。)

「margin:auto;」は子アイテムのマージン（余白）を調整するものなので、子アイテムの中の要素は関係ない。

では上でやったのと同様に、中の要素にもマージンを指定すれば・・・と思ったら、中の要素がブロック要素なら可能ですが、テキストはインライン要素なので縦方向のマージンが設定できない...

では中の要素をブロック化、はテキストなのでできないので、中のテキストをさらに囲ってブロック化してしまえば・・・

一応、できました。

（分かりやすく中のブロックにも枠線を指定しています。）

ただ、これだと三重箱状態になる。。。。

※ただ、IE11ではできていない模様・・・何故だ？？？
⇒結論→諦めるしかない？

「margin:autoで上下左右とも中央寄せされる」が正しい解釈なのですが、IEではここの表示が正しくされないようです。

解決方法はないかと思いきや、ありました。

　↓↓↓　↓↓↓

---

実は、「 justify-content 」と同様に、上下方向の位置を調整するスタイル指定が Flexbox には用意されていました。

「 justify-content 」は横方向の配置をフレキシブルに調整してくれるもの、対して、縦方向の位置の設定は⇒「 align-items 」で設定します。

これだと、子アイテムの中のテキストの位置も指定できます。（子アイテムの display にも Flex を指定する必要がある。）

つまり、以下の３つの指定を親要素にも子要素にも設定してやれば、子アイテムの中身を再度囲わなくても、全部中央寄りの設定が可能というわけですね

display: flex; justify-content: space-around; align-items: center;

IE11で失敗していた上下中央寄せが、これで成功します。