【CSS】align-items:centerが効かない原因と解決方法3選

align-itemsは縦位置を調整するCSSです。

align-items:centerを指定すると縦の中央寄せになります。

でも思った位置になってない？ずれている？効いていない？

align-items:centerが効かない原因と解決方法を3つ紹介します。

align-itemsの基本はこちら↓

【原因1】flexを指定していない

align-itemsはdisplay:flexとセットで使うCSSです。

縦中央揃えの方法などでよく紹介されているalign-itemsですが、display:flexが指定されていないと使えません。

【失敗例】中央寄せしたいのに効いてない

<style>
.example{
    /*コレが効いてない*/align-items: center;
    height:100px;
    border: 1px solid #999;
    background: #ffeb00;
}
.example>div{
    width: 30%;
    box-sizing: border-box;
    padding: 10px;
    background: #b8dbf8;
}
</style>
<div class="example">
    <div>1</div>
</div>

【解決方法】

display:flexを指定しましょう。

displayがblockなどflex以外の値に上書きされていないかもチェックしましょう。

<style>
.example2{
    /*コレを追加*/display: flex;
    align-items: center;
    height:100px;
    border: 1px solid #999;
    background: #ffeb00;
}
.example2>div{
    width: 30%;
    box-sizing: border-box;
    padding: 10px;
    background: #b8dbf8;
}
</style>
<div class="example2">
    <div>1</div>
</div>

念のためflexが効かない原因も確認しておきましょう。↓

【原因2】高さがない

align-items:centerは縦中央寄せできますが、縦の高さがなければ中央寄せしようがありません。

【失敗例】高さがないため縦中央寄せできない

<style>
.example3{
    display: flex;
    /*コレが効いてない？*/align-items: center;
    border: 1px solid #999;
    background: #ffeb00;
}
.example3>div{
    width: 30%;
    box-sizing: border-box;
    padding: 10px;
    background: #b8dbf8;
}
</style>
<div class="example3">
    <div>1</div>
</div>

【解決方法】

親要素にheightなどを使い、高さを確保しましょう。

<style>
.example4{
    /*コレ*/height: 100px;
    display: flex;
    align-items: center;
    border: 1px solid #999;
    background: #ffeb00;
}
.example4>div{
    width: 30%;
    box-sizing: border-box;
    padding: 10px;
    background: #b8dbf8;
}
</style>
<div class="example4">
    <div>1</div>
</div>

【原因3】flex-direcion:columnで縦並びにしている

flex-direcionはflex内の子要素の方向と順番を指定するCSSです。

flex-direcion:columnを指定すると子要素が縦並びになります。

このときalign-itemsは横方向の位置調整に変わります。

よってalign-itemsが効いていないように見えます。

【失敗例】縦中央寄せしたいのに横中央寄せになっている

<style>
.example5{
    display: flex;
    /*コレが効いてない*/align-items: center;
    /*コレが原因*/flex-direction: column;
    height: 100px;
    border: 1px solid #999;
    background: #ffeb00;
}
.example5>div{
    width: 30%;
    box-sizing: border-box;
    padding: 10px;
    background: #b8dbf8;
}
</style>
<div class="example5">
    <div>1</div>
</div>

【解決方法】

justify-contentで位置調整しましょう。

justify-contentは本来横の位置を調整するCSSですが、flex-direcion:columnで縦並びになっているときは縦方向の位置調整になります。

<style>
.example6{
    display: flex;
    /*コレは不要align-items: center;*/
    /*コレを追加*/justify-content: center;
    flex-direction: column;
    height: 100px;
    border: 1px solid #999;
    background: #ffeb00;
}
.example6>div{
    width: 30%;
    box-sizing: border-box;
    padding: 10px;
    background: #b8dbf8;
}
</style>
<div class="example6">
    <div>1</div>
</div>

flex-direcion:columnの指定が意図的でないのなら削除またはflex-direction:rowを指定して横並びに戻すとalign-itemsが効くようになります。

【その他の原因】ケアレスミス

スペルミスやCSSの優先順位のミスなどケアレスミスの可能性があります。

下記記事を参考に見直してみてください。

【まとめ】align-items:centerが効かない原因

【原因1】flexを指定していない

align-itemsにセットでdisplay:flexを指定する

【原因2】高さがない

親要素にheightなどを使い、高さを確保する

【原因3】flex-direcion:columnで縦並びにしている

justify-contentを使う

以上、align-items:centerが効かない原因と解決方法3選でした。