導入

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 */
}`}

{`

    
Isi di sini
`}

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

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

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

{`

    
Isi di sini
`}

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

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

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

{`

    
Isi di sini
`}

4. 自動証拠金の使用

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

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

{`
Isi di sini
`}

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;
}`}

{`

    
Isi di sini
`}

6. テーブル表示の使用

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

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

{`

    
Isi di sini
`}

結論

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