【CSS】Flexboxのalign-items: center; が効かないときの対処法

display:flexがある要素のheightを指定してあげて解決

align-items:centerはflexboxで、垂直方向の中央に要素を指定するコードです。例えば次のようなコードがあっても、ul要素は垂直方向の真ん中にはきません。

.header-menu{
    height:100px;
}

.header-menu ul{
    display: flex;
    align-items:center;
}

display:flexが指定されている要素にheightを指定することで、解決することができます。

.header-menu{
    height:100px;
}

.header-menu ul{
    display: flex;
    align-items:center;
    heihgt:inherit;
}

ちなみに、「inherit」とは親要素の値を受け継ぐという意味です。この場合、100pxが受け継がれます。