display: flex;とalign-items: center;を指定すると子要素は縦に揃いますが、height: 100%;を指定しても効きません。
しかし、display: flex;のみだとデフォルト値のalign-items: stretch;のおかげでheightは100%っぽくなりますが、今度は縦に中央揃えができません。
子要素でheight: 100%;とalign-items: center;の状態を同時に実現する必要があったので、今回はこれのやり方を解説します。
height: 100%;っぽくしつつalign-items: center;っぽくする方法
こんな感じのコードでいけました。
<div class="parent">
<div class="child">子要素です</div>
</div>
.parent {
display: flex;
}
.child {
display: flex;
align-items: center;
height: 300px;
}
まず親要素をflexにします。この時align-itemsは指定しないようにするとデフォルトのalign-items: stretch;が当たって子要素がhegiht: 100%;っぽい感じになります（height: 100%;を指定するのはダメです）。
そして子要素にdisplay: flex;とalign-items: center;を指定します。すると親要素のalign-items: stretch;と子要素のalign-items: center;で子要素をheight; 100%;っぽい感じにしつつ縦に中央揃えができるようになります。
子要素にheightを固定pxで与えてもちゃんと縦に中央揃えになっています。
注意したいのはflexの子要素にheight: 100%;を指定しても意味がないってことですね。
まあ超簡単にいうと、親要素にdisplay: flex;、子要素にdisplay: flex; align-items: center;を指定すればokってことです。
まとめ
flex要素はheight: 100%;を指定しても意味ないので100%にしつつ縦に中央揃えが同時にできないわけですが、親要素と子要素で役割を分担すれば今回のようにheight: 100%;っぽくしつつalign-items: center;を当てることができるわけです。
たまに使う時が来るので知っておくといいかもです。
