Verschiedene effektive Möglichkeiten, Divs mit CSS zu zentrieren

Pendahuluan

Ada beberapa cara untuk memposisikan elemen div di tengah (center) menggunakan CSS. Berikut adalah beberapa metode umum:

1. Menggunakan Flexbox

Flexbox adalah salah satu metode paling populer untuk memposisikan elemen di tengah secara horizontal dan vertikal.

{` .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. Menggunakan Grid Layout

CSS Grid juga memberikan cara yang mudah untuk memposisikan elemen di tengah.

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

{`
 
Isi di sini
 
`}

3. Menggunakan Position Absolute dan Transform

Metode ini menggunakan position: absolute dan transformasi untuk memposisikan elemen di tengah.

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

{`
 
Isi di sini
 
`}

4. Menggunakan Margin Auto

Metode ini digunakan untuk memposisikan elemen secara horizontal di tengah dengan margin otomatis. Namun, untuk vertikal, diperlukan trik tambahan.

{`.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. Menggunakan Text-align dan Line-height (Hanya Horizontal Centering)

Cara ini bekerja dengan baik untuk teks atau elemen inline-block.

{`.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. Menggunakan Table Display

Ini adalah teknik yang lebih lama tetapi tetap berfungsi.

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

{`
 
Isi di sini
 
`}

Kesimpulan

Untuk centering elemen di tengah halaman baik secara horizontal maupun vertikal, metode Flexbox dan Grid adalah yang paling mudah dan modern. Namun, metode lain masih berguna tergantung pada kebutuhan proyek. Terimakasih telah membaca artikel ini sampai akhir

Das obige ist der detaillierte Inhalt vonVerschiedene effektive Möglichkeiten, Divs mit CSS zu zentrieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!