CSS で要素を垂直方向に中央揃えする 7 つの方法

CSS で要素を垂直方向に中央揃えする 7 つの方法

【1】中央の要素の幅と高さを知る

絶対値 + 負のマージン

コードの実装

.wrapBox5{
    幅: 300ピクセル;
    高さ: 300px;
    border:1px 赤一色;
    位置: 相対的;
}
.wrapItem5{
    幅: 100ピクセル;
    高さ: 50px;
    位置: 絶対;
    背景:黄色;
    上位: 50%;
    残り:50%;
    上マージン: -25px;
    左マージン: -50px;
}

運用結果

絶対 + マージン 自動

コードの実装

.wrapBox{
    幅: 300ピクセル;
    高さ: 300px;
    背景: 黄色;
    位置: 相対的;
}
.wrapItem{
    幅: 100ピクセル;
    高さ: 50px;
    背景:緑;
    表示: インラインブロック;
    位置: 絶対;
    上: 0px;
    下:0px;
    左: 0px;
    右: 0px;
    マージン:自動;
}

絶対値 + 計算

コードの実装

.wrapBox6{
    幅: 300ピクセル;
    高さ: 300px;
    border:1px 緑一色;
    位置: 相対的;
}
.wrapItem6{
    幅: 100ピクセル;
    高さ: 50px;
    位置: 絶対;
    背景:黄色;
    上: calc(50% - 25px);
    左:calc(50% - 50px);
}

運用結果

3つの比較のまとめ

中央に配置された要素の幅と高さがわかっている場合、中心を設定する方法は比較的簡単です。 3 つの方法の本質は同じです。いずれも、中央に配置された要素に対して絶対的な配置を実行します。上部に 50%、左側に 50% 配置した後、中央に配置された要素の幅と高さの半分に引き戻され、真の中央配置が実現されます。 3 つの方法の違いは、要素自体の幅と高さを引き戻す方法の違いにあります。

【2】中央の要素の幅と高さが不明

絶対 + 変換

コードの実装

.wrapBox{
    幅: 300ピクセル;
    高さ: 300px;
    背景:#ddd;
    位置: 相対的;
}
.wrapItem{
    幅: 100ピクセル;
    高さ: 50px;
    背景:緑;
    位置: 絶対;
    上位: 50%;
    残り:50%;
    変換: translate(-50% , -50%);
}

運用結果

原理は、幅と高さがわかっている場合の実装方法と似ていますが、現在中央にある要素の幅と高さは不明であるため、現在中央にある要素の幅と高さを自動的に取得する必要がある点が異なります。 translate 属性はまさにこの機能を実装します。

利点と欠点 利点: 幅と高さを独自に自動的に計算します。 欠点: transform の他のプロパティを同時に使用すると、相互に影響を及ぼします。
したがって、変換の他のプロパティが使用されていない場合は、この方法をお勧めします。

フレックスレイアウト

.wrapBox2{
    幅: 300ピクセル;
    高さ: 300px;
    背景: 青;
    ディスプレイ: フレックス;
    コンテンツの中央揃え: 中央;
    アイテムの位置を中央揃えにします。
}
/*注: 子要素を行ブロック要素として設定しない場合でも、単一のレイヤーを占有することはありません*/
.wrapItem2{
    幅: 100ピクセル;
    高さ: 50px;
    背景:緑;
}

運用結果

原則: 親要素をフロー レイアウトに設定し、フレックス レイアウトのプロパティ特性に従って子要素を中央に設定します。

利点と欠点 利点: フレックス レイアウトは柔軟性があり、子要素の設定を必要としません。 欠点: 互換性。子要素のfloat、clear、position等が使えません。他のレイアウトも存在する場合、影響が出やすいです。

テーブルセルレイアウト

コードの実装

.wrapBox3{
    幅: 300ピクセル;
    高さ: 300px;
    背景: 黄色;
    表示: テーブルセル;
    垂直位置合わせ: 中央;
    テキスト配置: 中央;
}
.wrapItem3{
    幅: 100ピクセル;
    高さ: 50px;
    背景:緑;
    表示: インラインブロック;
}

運用結果

原則: テーブルの vertical-align プロパティに従って、要素をテーブル要素内で中央に配置するように設定し、次に text-align に従って水平方向の中央を設定できます。

表の要素

コードの実装

.tableBox{
    border:2px 実線黄色;
    幅: 300ピクセル;
    高さ: 300px;
}
.tableBox テーブル{
    幅:100%;
    高さ:100%;
}
.centerWrap{
    テキスト配置: 中央;
    垂直位置合わせ: 中央;
}
.centerアイテム{
    表示: インラインブロック;
    背景:ピンク;
}

運用結果

まとめると、テーブルタグは主に vertical-align 属性と text-align 属性を使用してレイアウトに使用されます。ただし、以前の方法と比較すると、テーブル タグを使用すると冗長なコードが大量に生成されます。推奨されません

CSS で要素を垂直方向に中央揃えする 7 つの方法についての記事はこれで終わりです。CSS で要素を垂直方向に中央揃えする方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  よく使用される HTML メタタグ属性 (Web サイトの互換性と最適化に必要)

>>:  K8Sの高度な機能を理解するための記事

推薦する

Typescript+React でモバイルと PC でシンプルなドラッグ アンド ドロップ効果を実現

この記事では、モバイルとPCで簡単なドラッグアンドドロップ効果を実現するためのTypescript ...

1つの記事でJSONPの原理と応用を理解する

目次JSONPとはJSONP 原則JSONP実装1. Ajaxでクロスドメインリクエストが行われると...

ラムダ式の原則と例

ラムダ式ラムダ式 (クロージャとも呼ばれる) は、Java 8 のリリースを推進した最も重要な新機能...

HTML ページ出力で従うべきいくつかの原則の要約

1. DOCTYPE は必須です。ブラウザは宣言した DOCTYPE に基づいてページのレンダリング...

MySQLでMyISAMストレージエンジンをInnodbに変更した操作記録のまとめ

一般的に、MySQL はデフォルトでさまざまなストレージ エンジンを提供しており、次のように表示され...

Linux でネットワーク パケット損失と遅延をシミュレートする方法

netem と tc: netem は、Linux カーネル バージョン 2.6 以降で提供されるネ...

MySQL 5.7 でパスワードを忘れた場合の解決方法の詳細な説明

環境: [root@centos7 ~]# uname -r 3.10.0-514.el7.x86_...

シンプルな計算機を実装するためのネイティブ js

この記事の例では、参考までに簡単な計算機を実装するためのjsの具体的なコードを共有しています。具体的...

jQueryは広告の表示と非表示のアニメーションを実装します

数秒後に広告が表示されて消えることがよくあります。この機能を実装するには、JQuery フレームワー...

あなたをエキスパートに見せるための 13 個の JavaScript ワンライナー

目次1. ランダムなブール値( true / false )を取得する2. 指定された日付が営業日で...

uniapp プロジェクトで MQTT を使用する方法

目次1. uniappプラグインマーケットのリファレンスプラグイン2. 具体的な導入プロセス1. m...

レスポンシブデザインについての簡単な説明

1. レスポンシブ デザインとは何ですか?レスポンシブデザインとは、ウェブサイトの開発プロセス中に、...

Docker コンテナでネットワーク リクエストが遅くなる問題の解決策

Docker の使用中に、いくつかの問題が発見されました。npm install や bundle ...

Dockerコンテナでの静的ウェブサイトレイアウトの実装

サーバーの配置数日間無料で使用できるクラウドサーバー(Alibaba Cloud、Huawei Cl...