☰

div を垂直方向に中央揃えにするにはどうすればいいですか? 質問する

tag-icon • tag-icon html css
div を垂直方向に中央揃えにするにはどうすればいいですか? 質問する

divを水平方向と垂直方向に中央揃えにしたいです。

水平方向の問題はすべて問題ありませんが、垂直方向の配置に問題があります。

私はこれを試しました:

#parent {
    display: table;
}

#child {
    display: table-row;
    vertical-align: middle;
}

しかし、これは機能しません。

ベストアンサー1

をサポートするブラウザー (またはそのベンダー プレフィックス付きバージョン) のみをサポートする必要がある場合はtransform、この奇妙で古いトリックを使用して要素を垂直に揃えます。

#child {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

古いブラウザをサポートする必要がある場合は、これらを組み合わせて使用​​できますが、レンダリングの違いにより面倒な場合がありますblock。table

#parent {
    display: table;
}

#child {
     display: table-cell;
     vertical-align: middle;
}

高さが固定されていて、非常に古くて厄介なブラウザをサポートする必要がある場合...

#parent {
   position: relative;
}

#child {
   height: 100px;
   position: absolute;
   top: 50%;
   margin-top: -50px;
}

身長が固定されていない場合は、回避策。

jsFiddleで見る。

おすすめ記事