CSS を使用して Div を中央に配置するためのさまざまな効果的な方法

導入

CSS を使用して div 要素を中央に配置する方法はいくつかあります。一般的な方法をいくつか示します:

1. フレックスボックスの使用

フレックスボックスは、要素を水平方向および垂直方向に中央揃えするための最も一般的な方法の 1 つです。

{` .container {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 100vh; /* Contoh: memposisikan div dalam tinggi viewport */
}`}

{`<div class="container">
    <div class="centered">Isi di sini</div>
</div>`}

2. グリッドレイアウトの使用

CSS グリッドは、要素を中央に配置する簡単な方法も提供します。

{`.container {
    display: grid;
    place-items: center; /* Center horizontally and vertically */
    height: 100vh;
}`}

{`<div class="container">
    <div class="centered">Isi di sini</div>
</div>`}

3. 絶対位置と変換の使用

このメソッドは、position:Absolute とtransformを使用して要素を中央に配置します。

{`.container {
    position: relative;
    height: 100vh;
}
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}`}

{`<div class="container">
    <div class="centered">Isi di sini</div>
</div>`}

4. 自動証拠金の使用

このメソッドは、自動マージンを使用して要素を水平方向に中央に配置するために使用されます。ただし、垂直方向の場合は追加のトリックが必要です。

{`.centered {
    width: 200px; /* Contoh lebar */
    height: 200px; /* Contoh tinggi */
    margin: auto;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}`}

{`<div class="centered">Isi di sini</div>`}

5. Text-align と Line-height の使用 (水平方向の中央揃えのみ)

これはテキストまたはインラインブロック要素に適しています。

{`.container {
    text-align: center; /* Horizontal centering */
    line-height: 100vh; /* Contoh tinggi viewport untuk vertikal centering */
}
.centered {
    display: inline-block;
    vertical-align: middle; /* Jika digunakan dengan elemen lain */
    line-height: normal;
}`}

{`<div class="container">
    <div class="centered">Isi di sini</div>
</div>`}

6. テーブル表示の使用

これは古い手法ですが、今でも機能します。

{`.container {
    display: table;
    height: 100vh;
    width: 100%;
    text-align: center; /* Horizontal centering */
}
.centered {
    display: table-cell;
    vertical-align: middle; /* Vertikal centering */
}`}

{`<div class="container">
    <div class="centered">Isi di sini</div>
</div>`}

結論

要素をページの中央に水平方向と垂直方向の両方で中央に配置するには、Flexbox と Grid の方法が最も簡単で最新です。ただし、プロジェクトのニーズによっては、他の方法も役立つ場合があります。この記事を最後まで読んでいただきありがとうございます

以上がCSS を使用して Div を中央に配置するためのさまざまな効果的な方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。