CSS を使用して DIV を中央揃えにする方法 [5 つの簡単な方法]

コーディング スキルを活かしてプロジェクトの構築を開始したことがある場合は、要素をページの中央に配置するという課題に直面したことがあるでしょう。 「div を中央に配置するにはどうすればよいですか?」という質問ほぼすべての Web 開発者が遭遇する問題です。

このブログでは、CSS を使用して要素を中央に配置する簡単な方法を検討します。基本的な方法から最新のテクニックまで、要素を水平方向と垂直方向の中央に配置する方法を説明します。それぞれの方法を簡単な例で説明するので、それがどのように機能するかを正確に理解できます。

CSS を初めて使用する場合でも、簡単に復習する必要がある場合でも、このガイドは、Web ページ上で要素を中央に配置する方法を習得するのに役立ちます。始めましょう!

DIV とは何ですか? なぜ DIV を中央に配置することを検討するのでしょうか?

divまたは Division は、Web ページ上の他の要素をグループ化するコンテナとして機能する基本的な HTML 要素です。

これは、テキスト、画像、その他の要素などのコンテンツを整理するために使用できるボックスのようなものだと考えてください。 Div は、Web ページ上のコンテンツを構造化およびスタイル設定して、Web ページをより整理され、視覚的に魅力的なものにするために不可欠です。

なぜ Div を中心に配置することを検討するのでしょうか?

div を中央に配置することは、ユーザー エクスペリエンスの観点から非常に重要です。ただし、Web ページの外観とレイアウトを大幅に改善できるため、Web 開発者にとってはスタイル設定が難しい場合があります。

センタリングが重要な理由は次のとおりです。

• 読みやすさと美しさの向上:コンテンツを中央に配置すると、視覚的に魅力的になり、ユーザーはボタン、フォーム、画像などの主要な要素に集中しやすくなります。
• レスポンシブ デザイン:レイアウトがさまざまな画面サイズに適応する場合、中央揃えによりコンテンツのバランスが保たれ、デスクトップからスマートフォンまですべてのデバイスで見栄えが良くなります。
• 重要な要素を強調する:中央に配置することは、「サインアップ」ボタンや目玉画像などの重要なセクションや行動喚起に注意を引くための優れた方法です。
• よりクリーンでよりプロフェッショナルなレイアウト:中央レイアウトは多くの場合、よりクリーンで洗練されたように見え、サイトによりプロフェッショナルな雰囲気を与えます。

CSS を使用して DIV を中央に配置する方法 (さまざまな方法)

div を水平方向、垂直方向、またはその両方の中央に配置するかどうかに応じて、div を中央に配置する方法はいくつかあります。以下にいくつかの簡単な方法を示します。

CSS を使用して div を中央揃えにする最も一般的な方法をいくつか紹介します。

方法 1: 自動マージンを使用して Div を中央に配置する方法

Web デザインに慣れていない場合、Web ページ上で要素を中央に配置するのは難しいように思えるかもしれませんが、コツを掴めば非常に簡単です。 div水平方向に中央揃えする古典的で簡単な方法の 1 つは、自動マージンを使用することです。段階的に見ていきましょう。

1. 知っておくべきこと

自動マージンを使用してdiv水平方向に中央揃えにするには、次の手順に従います。

• 1. 幅を制限する: まず、 divコンテナの幅全体を占めていないことを確認します。デフォルトでは、 divは幅全体に拡張されます。中央に配置するには、最大幅を設定する必要があります。

• 2. 自動マージンを使用する: 左側と右側に自動マージンを設定すると、 div中央に寄せられます。

簡単な例を次に示します。

html

<div class="centered-div">This is a centered div</div>

css

.centered-div {

max-width: fit-content; /* Makes the div only as wide as its content */

margin-left: auto; /* Pushes the div to the right */

margin-right: auto; /* Pushes the div to the left, centering it */
}

2. max-width: fit-content;を使用する理由?

max-width: fit-content;このルールは、 divその内容に基づいて必要な幅だけを占めるようにします。 200pxなどの固定幅を使用した場合、コンテナーが狭すぎるとdivオーバーフローする可能性があります。 fit-content 、コンテンツに合わせてdivサイズを動的に調整します。

3. 自動証拠金はどのように機能しますか?

自動マージンはお腹を空かせたカバのように動作し、両側の余分なスペースを均等に消費して div を中央に配置します。この方法はさまざまな言語に合わせて自動的に調整され、他の要素に影響を与えずに単一の要素を中央に配置するのに最適です。

両方のマージンがautoに設定されている場合、余分なスペースが均等に共有され、 div中央に配置されます。

4. 最新のショートカットの使用: margin-inline

margin-leftとmargin-right個別に設定する代わりに、 margin-inlineプロパティを使用して、より明確なアプローチを実現できます。

.centered-div {

最大幅: コンテンツに合わせて;

マージンインライン: 自動; /* 左右のマージンを自動的に auto に設定します */

}

方法 2: Flexbox を使用して DIV を中央に配置する方法

Flexbox を使用すると、項目を両方向の中央に簡単に配置できます。 Flexbox を使用して単一の要素を中央に配置する方法は次のとおりです。

。容器 {

ディスプレイ: フレックス;

コンテンツの位置揃え: 中央; /* 水平方向に中央揃え */

整列項目: 中央; /* 垂直方向に中央揃え */

}

この例では、 .container Flexbox を使用するように設定されています。 justify-content: centerプロパティは項目を水平方向に中央揃えにしますが、 align-items: center揃えにします。

考慮すべきいくつかの重要なポイント:

水平方向と垂直方向の中央揃え: Flexbox を使用すると、項目がコンテナからはみ出した場合でも、項目を水平方向と垂直方向の両方で簡単に中央揃えにできます。

複数のアイテム: Flexbox は複数のアイテムも適切に処理します。 flex-direction: rowを使用して項目を行にスタックするか、 flex-direction : column を使用して垂直方向にスタックできます。 gapを追加すると、項目間の間隔を調整できます。

この方法は非常に柔軟であり、さまざまなレイアウトで要素を中央に配置するためによく使用されます。

方法 3: DIV をビューポートの中央に配置する方法

ポップアップやバナーなどの要素を画面 (ビューポート) の中央に配置したい場合は、CSS の配置を使用できます。簡単な方法は次のとおりです。

1. 位置固定による基本的なセンタリング

要素を水平方向と垂直方向の両方で中央揃えにするには、次の手順を実行します。

• 位置を固定に設定します。

– position: fixed;スクロールしても要素がその場に留まります。要素を画面に貼り付けるようなものです。

• インセットを使用してアンカーします:

– inset: 0px;は、ビューポートの端 (上、右、下、左) から要素の距離を 0 ピクセルに設定するためのショートカットです。これにより、要素が画面全体に広がるようになります。

• サイズを制限:

– widthとheightを設定して要素のサイズを定義します。

– max-widthとmax-heightを使用して、小さな画面でオーバーフローしないようにします。

• 自動マージンを使用した中央揃え: – margin: auto;要素を中央に配置します。周囲の余分なスペースを均等に分割し、中心に位置するようにします。

コード例:

。要素 {

位置: 固定;

インセット: 0; /* 要素をすべてのエッジに固定します */

幅: 12レム; /* 固定幅を設定します */

高さ: 5レム; /* 固定の高さを設定します */

最大幅: 100vw; /* ビューポートの幅をオーバーフローしないようにします */

最大高さ: 100dvh; /* ビューポートの高さをオーバーフローしないようにします */

マージン: 自動; /* 要素を中央に配置します */

}

2. 水平方向のみの中央揃え

要素を水平方向に中央揃えしたいだけの場合 (例: Cookie バナーを下部に)、次のようにします。

• 固定位置:

– position: fixed;要素を所定の位置に保持します。

• エッジにアンカー:

– left: 0; right: 0;一方の側からもう一方の側まで水平に引き伸ばします。

– bottom: 8px;下端から配置します。

• 拘束して中央に配置:

– 固定幅を設定します。

– margin-inline: auto;水平方向の中央に配置します。

コード例:

.element {

position: fixed;

left: 0;

right: 0;

bottom: 8px; /* Positions from the bottom edge */

width: 12rem; /* Sets a fixed width */

max-width: calc(100vw - 16px); /* Ensures it fits within the viewport with some buffer */

margin-inline: auto; /* Centers horizontally */

}

3. サイズが不明な要素を中央に配置する

要素のサイズがわからないが、それでも中央に配置したい場合は、次のようにします。

• Fit-Content を使用します。

– width: fit-content;およびheight: fit-content;要素をそのコンテンツの周りで縮小できるようにします。

• センタリングを適用:

– position: fixed;およびmargin: auto;それを中央に配置します。

コード例:

.element {

position: fixed;

inset: 0;

width: fit-content; /* Shrinks to fit content */

height: fit-content; /* Shrinks to fit content */

margin: auto; /* Centers the element */

}

これらのメソッドを使用すると、要素のサイズに関係なく、要素をビューポートの中央に簡単に配置できます。

方法 4: CSS グリッドを使用して DIV を中央に配置する方法

CSS グリッドはレイアウト設計のための強力なツールであり、要素を中央揃えする場合に特に便利です。 CSS グリッドを使用して、水平方向と垂直方向の両方で何かを簡単に中央に配置する方法を次に示します。

1. 単一要素を中央に配置する

要素をコンテナ内の中央に配置するには、CSS グリッドを使用した簡単な設定を使用できます。

• グリッド表示のセットアップ:

– display: grid;コンテナをグリッドに変えます。

• Place-Content を使用します。

– place-content: center;は、コンテンツを水平方向と垂直方向の両方で中央揃えにするショートカットです。 justify-content (horizo​​ntal) とalign-content (vertical) の両方をcenterに設定します。

コード例:

css

。容器 {

表示: グリッド;

場所の内容: 中央; /* コンテンツを水平方向と垂直方向の両方で中央揃えにします */

}

これにより、要素はそのサイズに関係なく、コンテナーの中央に配置されます。

2. フレックスボックスとの違い

CSS グリッドは項目を中央に配置できますが、Flexbox とは動作が異なります。

– フレックスボックス: サイズとコンテナーのサイズに基づいてアイテムを中央に配置します。

– CSS グリッド: グリッド セルのサイズに基づいて項目を中央に配置します。グリッド セルのサイズが定義されていない場合、これは難しい場合があります。

パーセンテージを含むグリッドのコード例:

css

。容器 {

表示: グリッド;

場所の内容: 中央;

}

。要素 {

幅: 50%; /* 幅はグリッド セルの 50% です */

高さ: 50%; /* 高さはグリッド セルの 50% です */

}

グリッド セル サイズが指定されていない場合、要素は予想よりも小さくなる可能性があります。多くの場合、基本的なセンタリングには Flexbox の方が簡単です。

3. 複数の要素を中央に配置する

CSS グリッドは、同じセル内の複数の要素を処理することもできます。

• 複数の要素を同じセルに割り当てる:

– grid-rowとgrid-columnを使用して、項目を同じグリッド セルに配置します。

• セル内の項目を中央に配置します。

– place-items: center;グリッド セル内の項目を中央に配置します。

コード例:

css

。容器 {

表示: グリッド;

場所の内容: 中央; /* グリッドセルを中央に配置します */

アイテムを配置: 中央; /* セル内の項目を中央に配置します */

}

。要素 {

グリッド行: 1;

グリッド列: 1; /* すべての要素は同じセルに配置されます */

}

この設定では、サイズが異なる複数のアイテムがコンテナの中央に積み重ねられます。

重要なポイント

– CSS グリッドは、複雑なレイアウトや、配置を正確に制御する必要がある場合に最適です。

– 通常、単純なセンタリング作業ではFlexbox の方が簡単です。

これらの基本を踏まえると、CSS グリッドを使用して、さまざまなシナリオで単一要素と複数要素の両方を中央に配置できます。

方法 5: CSS でテキストを中央揃えにする方法

テキストを中央揃えにすることは、画像や div などの他の要素を中央揃えにすることとは少し異なります。これを行う簡単な方法は次のとおりです。

テキストのブロックを中央に配置する

コンテナー内のテキスト ブロック (div 内の段落など) を中央揃えにしたい場合は、 text-alignプロパティを使用します。これは、テキストがdiv 、 p 、 h1などのブロックレベル要素内にある場合に最適に機能します。

その方法は次のとおりです。

css

。容器 {

テキスト整列: 中央;

}

このコードは、ブラウザーにテキストをコンテナー内の中央に配置するように指示します。コンテナ自体も中央に配置したい場合は、Flexbox または Grid を使用できます。

css

。容器 {

ディスプレイ: フレックス;

コンテンツの位置揃え: 中央;

整列項目: 中央;

高さ: 100vh; /* 垂直方向の中央揃えのためにコンテナをフルハイトにします */

}

フレックスボックスとグリッドについてはどうですか?

フレックスボックスとグリッドはコンテナ全体を中央に配置するのに最適ですが、コンテナ内のテキストを中央に配置することはできません。フレックスボックスまたはグリッドを使用して段落を中央に配置すると、内部の個々の行や文字ではなく、テキストのブロックが中央に配置されます。

フレックスボックスを使用したテキストの中央揃え

Flexbox を使用して段落を中央揃えにする場合は、次のようにします。

css

。容器 {

ディスプレイ: フレックス;

コンテンツの位置揃え: 中央;

整列項目: 中央;

高さ: 100vh;

}

段落全体がコンテナ内の中央に配置されます。ただし、テキスト自体をその段落内で中央揃えにするには、 text-align: center;も必要です。 。

将来の CSS 機能

CSS でエキサイティングな開発が行われています。センタリングをさらに簡単にする新機能が登場します。現時点では、 text-align: center;で Flexbox または Grid を使用します。それを処理する最良の方法です。

このシンプルなアプローチにより、テキストがページ上のどこにあっても、テキストが美しく中央に配置されるようになります。

しかし、上記のすべての方法を考慮すると、さまざまな状況にどれが最適であるか混乱するかもしれません。その場合は、以下の結論を確認してください。

結論

このブログでは、フレックスボックスや自動マージンなどのさまざまなツールを使用して、DIV 要素を水平方向、垂直方向、およびページの中央に配置する方法を学習しました。これらのツールにはそれぞれ独自の利点と使用シナリオがあります。役立つように、一般的な使用例をいくつか示します。

• 自動マージン:単純な水平方向のセンタリングにこれを使用します。
• フレックスボックス:項目を両方向に中央揃えする場合や、項目の行または列を操作する場合に最適です。
• ビューポートの中央揃え:画面の中央に配置する必要があるポップアップまたは要素に最適です。
• CSS グリッド:複雑なレイアウトや、行と列の両方を中央揃えにする必要がある場合に最適です。

この投稿に関してご質問やご不明な点がございましたら、以下のコメント欄にご記入ください。

ラーフル

Rahul Kumar は Web 愛好家であり、WordPress と Web ホスティングを専門とするコンテンツ ストラテジストです。長年の経験と業界のトレンドを常に最新の状態に保つことに注力し、トラフィックを促進し、エンゲージメントを高め、コンバージョンを増やす効果的なオンライン戦略を作成しています。ラーフル氏は、細部へのこだわりと魅力的なコンテンツを作成する能力により、オンラインでの存在感を向上させようとしているあらゆるブランドにとって貴重な人材となっています。