CSSは高さを設定せずにdivを完全に中央に配置することを実現します

必要とする

本文の下のdivは垂直方向に中央揃えになっています
div 内のテキストを垂直中央に配置する
divの幅と高さはどちらもbodyの幅の半分です

分析する

div を中央に配置するのは難しくありません。これを実現するには、 translate属性とともにmarginまたはleft/topを使用することを検討してください。
重要な点は、divの高さが本体の半分に等しいことです。本体には高さがないので、divのheight： 50%；その結果、divの高さは0になります。
body の高さが 100vh になるように body を絶対配置した場合でも、div の高さは 50% に設定され、幅の半分ではなく body の高さの半分しか設定できません。
このとき、パディングのパーセンテージを設定する場合、参照は親コンテナの幅になるため、 paddingを使用する必要があります。

コード

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>ドキュメント</title>
    <スタイル>
        体{
            パディング: 0;
            マージン: 0;
        }
        ＃箱{
            幅: 50%;
            /* div を中央に配置する */
            位置: 相対的;
            変換: translate(50%, 25%);
            /* */
            /* ここでは、div の高さが body の幅の半分で、テキストが垂直方向に中央揃えになる問題を解決します */
            パディング上部: 25%;
            パディング下部: 25%;
            行の高さ: 0;
            テキスト配置: 中央;
            /* */
            背景色: #111;
            色: #fff;
        }
    </スタイル>
</head>
<本文>
    
    <div id="ボックス">
        ボックス123
    </div>
</本文>
</html>

効果

CSS を使用して高さを設定せずに div を完全に中央に配置する方法についての記事はこれで終わりです。CSS を使用して高さを設定せずに div を完全に中央に配置する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: JavaScript エラー処理 try..catch...finally + は throw+TypeError+RangeError をカバーします

>>: MySQL での Truncate の使用法の詳細な説明