上下中央揃えのやり方

Question

<div>要素の中の<p>要素、<img>要素を一括して上下中央揃えにするcssコードの記述方法はありますか？

Answer 1

pとimgを縦に並べるならば、以下の感じです。

div{
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
}

横に並べるならば、以下の感じです。

div{
  display: flex;
  flex-flow: wrap;
  align-content: center;
}

サンプルを作りました。

https://jsfiddle.net/Lhankor_Mhy/b052jqvw/

Answer 2

上下中央揃えにしたい<p>要素、<img>要素をさらに<div>で囲って、外の<div>要素にflexboxで上下中央にしてみてはどうでしょうか？

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

参考:https://ics.media/entry/17522/