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

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 の使用法の詳細な説明

推薦する

Vueナンバープレート入力コンポーネントの使い方の詳しい説明

参考までに、シンプルなナンバープレート入力コンポーネント(vue)です。具体的な内容は次のとおりです...

初心者向けウェブサイト構築チュートリアルの概要

これら 6 つの記事を書いた後、私は少し混乱し始めました。次にどこに書けばいいのか分かりません。ドメ...

Vue から React への変換入門ガイド

目次デザインコンポーネント通信ライフサイクルイベント処理品格とスタイルクラススタイル条件付きレンダリ...

SQL グループ化により重複を削除し、他のフィールドで並べ替える

必要:あるフィールドの同一項目を結合し、別の時間フィールドで並べ替えます。例:初めに テーブルから都...

Linuxにgitをインストールする方法

1. はじめにGit は、規模の大小を問わずあらゆるプロジェクトを俊敏かつ効率的に処理するために使用...

Vue elementUI はツリー構造テーブルと遅延読み込みを実装します

目次1. 成果を達成する2. バックエンドの実装2.1 エンティティクラス2.2 データベース内のデ...

1 つの記事で v-model とその修飾子を学ぶ

目次序文v-model の修飾子:怠け者トリム番号さまざまな入力タイプやその他の要素での v-mod...

Dockerはnginxをデプロイし、フォルダとファイル操作をマウントします

この間、私は docker を勉強していたのですが、nginx をデプロイするときに行き詰まりました...

CSS3 でクールなスライス画像カルーセル効果を実現

今日は、CSS を使用してクールな画像カルーセル コンポーネントを作成する方法を学びます。その原理は...

clipboard.js の使用法の概要

目次(1)はじめに: (2)クリップボードの内容をコピーする方法は次のとおりです。 (3)関数演算に...

IEの送信フォームの記録履歴クリックリターン情報を実現するためのCSSスタイルコントロールはまだ残っています

これは主に CSS スタイルのコントロールと META タグです。コードをコピーコードは次のとおりで...

Linux での mysql8.018 のインストールと設定のプロセスの詳細な説明

Windowsでのインストールの紹介:こちらもご覧ください –》WindowsでのMySQL 8.0...

zabbix 4.04 の詳細なインストール チュートリアル (CentOS 7.6 ベース)

1. インストール前の準備: 1.1 JDKをインストールするopenjdkをアンインストールする...

JS配列メソッドsome、every、findの使用に関する詳細

目次1. いくつか2. すべての3. 見つける1. いくつかsome()メソッドは、指定された関数の...

インターネット接続なしでLinux Centos7にアプリケーションをインストールする方法の詳細な説明

1. 前の章では、プログラムを yum リポジトリに直接インストールできることを学びましたが、そのた...