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の高度な機能を理解するための記事

推薦する

MySQL における SQL ページングクエリのいくつかの実装方法と利点と欠点

【SQL】SQLページングクエリの概要開発プロセスではページングが必要になることがよくあります。今日...

MySQL 5.7.20 共通ダウンロード、インストール、設定方法と簡単な操作スキル(解凍版無料インストール)

早朝に MySQL 5.7.19 のインストールを終えたばかりですが、午前中に MySQL が最新バ...

JavaScript DOM オブジェクト操作

目次1. コア1. Domノードを取得する2. ノードの更新2.1 実践演習3. Domノードを削除...

中国語でのNginx設定パラメータの詳細な説明(負荷分散とリバースプロキシ)

PS: 最近、nginx を詳細に紹介している <<High-Performance ...

Linux 仮想ホストで SourceGuardian (sg11) 暗号化コンポーネントを有効にする詳細な手順

注: sg11 弊社では Linux システム仮想ホストのセルフインストールのみサポートしております...

フロントエンドとバックエンドを分離した nginx 構成を展開するための完全な手順

序文決まり文句です。ここでは、フロントエンドとバックエンドの分離についての私の理解についてお話ししま...

フォーム入力ボックスに関するWebデザインのヒント

1. キャンセル ボタンが押されたときの破線ボックス<br /> 入力に属性値 hide...

Vue+js はビデオのフェードインとフェードアウト効果を実現します

Vue+jsはビデオのフェードインとフェードアウトを実現します。参考までに、具体的な内容は次のとおり...

VMware 15.5 に CentOS7 をインストールするためのグラフィック チュートリアル

1. VMware 15.5で新しい仮想マシンを作成する1. VMware を開き、ホームページで「...

JavaScript における 3 つの for ループ ステートメントの使用の概要 (for、for...in、for...of)

序文JS に触れるすべての開発者は、必然的に for ループを扱うことになります。結局のところ、fo...

MySQL外部キーの基本的な機能と使用方法の詳細な説明

この記事では、例を使用して、MySQL 外部キーの基本的な機能と使用方法を説明します。ご参考までに、...

Linux 上でプロジェクトをリリースするために Tomcat を展開するプロセスにおけるさまざまな問題と解決策

プロジェクトをプロジェクトサイトのテスト環境にデプロイするJDK1.8トムキャット8.5 Maven...

Mysql トランザクション分離レベルの読み取りコミットの詳細な説明

MySQL トランザクション分離レベルを表示する mysql> '%isolation...

Docker 入門インストールチュートリアル (初心者版)

ドクター紹介: Docker はコンテナ関連の技術です。簡単に言うと、さまざまなソフトウェアを実行で...

MySQL で explain ステートメントを使用する基本的なチュートリアル

目次1. 概要1. 説明文テスト2. 結果の各列の説明2. ID列の説明1. 環境整備2. expl...