HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

div要素を別のdiv要素の水平方向中央に配置する方法

Webページのレイアウトを作成していると、内側の

要素を外側の
要素の水平方向の中央に配置したい場面がよくあります。この記事では、HTMLファイルとCSSファイル（style.css）を使った具体的な実装例を紹介します。

ここでは、外側のdivに「o-div」、内側のdivに「i-div」というクラス名を使用します。

HTMLのサンプルコード

<html>
    <head>
        <title>center a div</title>
        <link href="../../Content/style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div class="o-div">
            I am OUTER DIV

            <div class="i-div">
                I am INNER DIV,
                I am in Center
            </div>
        </div>
    </body>
</html>

表示結果

I am OUTER DIV
I am INNER DIV, I am in Center

style.css の内容

body {
    background-color:Gray;
    padding:30px;
}

.o-div {
    padding:50px;
    background-color:Lime;
}

.i-div {
    background-color:Fuchsia;
    max-width:400px;
    height:200px;
    margin: 0 auto;
    text-align:center;
}

ポイント解説：margin: 0 auto の仕組み

内側のdiv（i-div）を水平方向の中央に配置している鍵となるのが、margin: 0 auto; という指定です。この記述の意味は以下の通りです。

  • 0 … 上下のマージンを0に設定
  • auto … 左右のマージンを自動計算し、均等に分配することで中央揃えを実現

この方法が機能するためには、対象の要素に幅（width や max-width）が明示的に指定されていることが重要です。今回の例では max-width:400px; を指定しているため、親要素より小さい幅を持つブロック要素として、左右のautoマージンによって中央に配置されます。

また、text-align:center; を併せて指定することで、内側のdiv内にあるテキストも中央揃えになります。

補足：Flexboxを使った現代的な方法

近年では、Flexbox（フレックスボックス）を使って中央配置を行うことも一般的です。外側のdivに対して以下のように指定するだけで、簡単に中央揃えが可能です。

.o-div {
    display: flex;
    justify-content: center; /* 水平方向の中央揃え */
}

どちらの方法でも目的は達成できますが、シンプルなレイアウトであれば margin: 0 auto;、柔軟なレイアウト制御が必要な場合はFlexboxを選ぶとよいでしょう。

  1. Windows 10のライセンスを別のPCに転送・移行する方法

    新しくノートパソコンやPCを購入すると、通常はWindows 10がすでにインストールされ、ライセンス認証済みの状態で届きます。しかし、自作PCやBTOパソコンを組み立てる場合はそうとは限らず、正規のWindowsライセンスを別途購入するために追加の出費が必要になることがあります。 ただし、新しいPCが古いPCの買い替えである場合、Windows 10のライセンスを新しいPCに転送できる可能性があり、新たにライセンスを購入する費用を節約できます。この記事では、Windows 10のライセンスを転送して新しいPCをセットアップする方法を詳しく解説します。 Windows 10のライセンスは転送で

  2. Tkinterのgrid（）でウィジェットを水平方向に中央揃えする方法

    Tkinterのgridジオメトリマネージャとは名前のとおり、グリッド（grid）とは行と列の集合のことです。Tkinterのgridマネージャも同様に動作し、ウィジェットを2次元平面状に配置することで、縦・横の位置をきれいに整列させることができます。ここでは、「ウィンドウをリサイズしてもウィジェットが常に中央に表示される」状態を作る例を紹介します。grid(row, column)プロパティでラベルウィジェットを水平方向に中央揃えにし、rowconfigure／columnconfigureのweight設定とstickyプロパティを組み合わせることで、リサイズ時にもウィジェットの位置が崩れ