コンテンツの高さが可変の場合、div のコンテンツを垂直方向に中央揃えする最適な方法は何ですか。私の場合、コンテナ div の高さは固定されていますが、コンテナの高さが可変の場合にも機能するソリューションがあれば便利です。また、CSS ハックや非セマンティック マークアップをまったく使用しないか、ほとんど使用しないソリューションがあれば嬉しいです。
ベストアンサー1
追加するだけ
position: relative;
top: 50%;
transform: translateY(-50%);
内側の div に。
これは、内側の div の上境界線を外側の div の半分の高さ ( top: 50%;) まで移動し、次に内側の div をその半分の高さ ( ) まで上に移動させます。これは、またはtransform: translateY(-50%)で機能します。position: absoluterelative
transformおよび にはtranslateベンダー プレフィックスがありますが、簡潔にするために含まれていないことに注意してください。