Cara Memusatkan DIV menggunakan CSS [5 Metode Cepat]

Jika Anda pernah mulai membangun proyek dengan keahlian coding Anda, Anda mungkin menghadapi tantangan untuk memusatkan elemen pada halaman. Pertanyaan “Bagaimana cara memusatkan div?” adalah salah satu yang ditemui hampir setiap pengembang web.

Blog ini akan mengeksplorasi cara mudah untuk memusatkan elemen menggunakan CSS. Dari metode dasar hingga teknik modern, kami akan membahas cara memusatkan elemen secara horizontal dan vertikal. Setiap metode akan dijelaskan dengan contoh sederhana, sehingga Anda dapat melihat cara kerjanya secara pasti.

Baik Anda baru mengenal CSS atau memerlukan penyegaran singkat, panduan ini akan membantu Anda menguasai seni memusatkan elemen pada halaman web Anda. Mari kita mulai!

Apa itu DIV dan Mengapa mempertimbangkan untuk memusatkan DIV?

Div atau divisi adalah elemen HTML dasar yang bertindak sebagai wadah untuk mengelompokkan elemen lain di halaman web.

Anggap saja seperti sebuah kotak yang dapat Anda gunakan untuk mengatur konten seperti teks, gambar, atau elemen lainnya. Div sangat penting untuk menyusun dan menata konten di halaman web Anda, menjadikannya lebih terorganisir dan menarik secara visual.

Mengapa Bahkan Mempertimbangkan untuk Memusatkan Div?

Memusatkan div sangat penting dari sudut pandang Pengalaman Pengguna. Namun hal ini dapat menjadi tantangan penataan gaya bagi pengembang web karena dapat secara signifikan meningkatkan tampilan dan tata letak halaman web.

Inilah mengapa pemusatan itu penting:

• Peningkatan Keterbacaan dan Estetika: Memusatkan konten dapat membuatnya lebih menarik secara visual dan memudahkan pengguna untuk fokus pada elemen utama, seperti tombol, formulir, atau gambar.
• Desain Responsif: Saat tata letak Anda beradaptasi dengan ukuran layar yang berbeda, pemusatan membantu memastikan konten Anda tetap seimbang dan terlihat bagus di semua perangkat, mulai dari desktop hingga ponsel cerdas.
• Menyoroti Elemen Kunci: Pemusatan adalah cara yang bagus untuk menarik perhatian ke bagian penting atau ajakan bertindak, seperti tombol “Daftar” atau gambar fitur.
• Tata Letak Lebih Bersih dan Profesional: Tata letak terpusat sering kali terlihat lebih bersih dan halus, sehingga membuat situs Anda terasa lebih profesional.

Cara memusatkan DIV menggunakan CSS (Metode Berbeda)

Memusatkan div dapat dilakukan dengan beberapa cara berbeda, bergantung pada apakah Anda ingin memusatkannya secara horizontal, vertikal, atau keduanya. Berikut beberapa metode sederhana:

Berikut adalah beberapa metode paling populer untuk memusatkan div menggunakan CSS:

Metode 1: Cara Memusatkan Div dengan Margin Otomatis

Jika Anda baru mengenal desain web, memusatkan elemen pada laman web mungkin tampak rumit, namun cukup mudah setelah Anda menguasainya. Salah satu metode klasik dan sederhana untuk memusatkan div secara horizontal adalah dengan menggunakan margin otomatis. Mari kita uraikan langkah demi langkah.

1. Yang Perlu Anda Ketahui

Untuk memusatkan div secara horizontal dengan margin otomatis, ikuti langkah-langkah berikut:

• 1. Batasi Lebar: Pertama, pastikan div Anda tidak memenuhi seluruh lebar wadahnya. Secara default, div diperluas untuk mengisi seluruh lebar. Untuk memusatkannya, Anda perlu mengatur lebar maksimum.

• 2. Gunakan Margin Otomatis: Margin otomatis di sisi kiri dan kanan akan mendorong div ke tengah.

Berikut ini contoh sederhananya:

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. Mengapa Menggunakan max-width: fit-content; ?

max-width: fit-content; aturan memastikan bahwa div hanya mengambil lebar sebanyak yang dibutuhkan, berdasarkan kontennya. Jika Anda menggunakan lebar tetap, seperti 200px , div mungkin meluap jika wadahnya terlalu sempit. fit-content menyesuaikan ukuran div secara dinamis agar sesuai dengan kontennya.

3. Bagaimana Cara Kerja Margin Otomatis?

Margin otomatis bertindak seperti kuda nil yang lapar, melahap ruang ekstra secara merata di kedua sisi untuk memusatkan div. Metode ini menyesuaikan secara otomatis untuk berbagai bahasa dan sempurna untuk memusatkan elemen tunggal tanpa memengaruhi elemen lainnya.

Ketika kedua margin disetel ke auto , keduanya berbagi ruang ekstra secara merata, yang memusatkan div .

4. Menggunakan Pintasan Modern: margin-inline

Daripada mengatur margin-left dan margin-right secara terpisah, Anda dapat menggunakan properti margin-inline untuk pendekatan yang lebih rapi:

.centered-div {

lebar maksimal: konten sesuai;

margin-inline: otomatis; /* Secara otomatis mengatur margin kiri dan kanan menjadi otomatis */

}

Metode 2: Cara Memusatkan DIV dengan Flexbox

Flexbox memudahkan untuk memusatkan item di kedua arah. Inilah cara Anda memusatkan satu elemen menggunakan Flexbox:

.wadah {

tampilan: fleksibel;

justify-content: tengah; /* Berpusat secara horizontal */

menyelaraskan-item: tengah; /* Berpusat secara vertikal */

}

Dalam contoh ini, .container diatur untuk menggunakan Flexbox. Properti justify-content: center memusatkan item secara horizontal, sementara align-items: center memusatkannya secara vertikal.

Beberapa Poin Penting yang perlu dipertimbangkan:

Pemusatan Horizontal dan Vertikal: Flexbox memudahkan untuk memusatkan item baik secara horizontal maupun vertikal, meskipun wadahnya meluap.

Banyak Item : Flexbox juga menangani banyak item dengan baik. Anda dapat menggunakan flex-direction: row untuk menumpuk item dalam satu baris atau flex-direction : kolom untuk tumpukan vertikal. Menambahkan gap dapat mengatur jarak antar item.

Metode ini sangat fleksibel dan umum digunakan untuk memusatkan elemen di berbagai layout.

Metode 3: Cara Memusatkan DIV di Viewport

Saat Anda ingin memusatkan suatu elemen, seperti popup atau banner, di tengah layar (viewport), Anda dapat menggunakan pemosisian CSS. Berikut cara sederhana untuk melakukannya:

1. Pemusatan Dasar dengan Posisi Tetap

Untuk memusatkan elemen secara horizontal dan vertikal, gunakan langkah-langkah berikut:

• Atur Posisi ke Tetap:

– position: fixed; membuat elemen tetap di tempatnya saat Anda menggulir. Ini seperti menempelkan elemen ke layar.

• Gunakan Inset ke Jangkar:

– inset: 0px; adalah pintasan untuk mengatur jarak elemen dari tepi viewport (atas, kanan, bawah, kiri) menjadi 0 piksel. Ini meregangkan elemen untuk memenuhi seluruh layar.

• Batasan Ukuran :

– Atur width dan height untuk menentukan ukuran elemen.

– Gunakan max-width dan max-height untuk memastikannya tidak meluap di layar yang lebih kecil.

• Tengah dengan Margin Otomatis : – margin: auto; memusatkan elemen. Ini membagi ruang ekstra di sekitarnya secara merata, memastikannya tetap berada di tengah.

Contoh Kode:

.elemen {

posisi: tetap;

sisipan: 0; /* Menambatkan elemen ke semua sisi */

lebar: 12rem; /* Menetapkan lebar tetap */

tinggi: 5rem; /* Menetapkan ketinggian tetap */

lebar maksimal: 100vw; /* Memastikan tidak melebihi lebar viewport */

tinggi maksimal: 100dvh; /* Memastikan tidak melebihi ketinggian viewport */

margin: otomatis; /* Memusatkan elemen */

}

2. Memusatkan Secara Horizontal Saja

Jika Anda hanya ingin memusatkan elemen secara horizontal (misalnya, spanduk cookie di bagian bawah), lakukan ini:

• Posisi Tetap:

– position: fixed; menjaga elemen tetap di tempatnya.

• Jangkar ke Tepi:

– Gunakan left: 0; dan right: 0; untuk merentangkannya dari satu sisi ke sisi lainnya secara horizontal.

– Tetapkan bottom: 8px; untuk memposisikannya dari tepi bawah.

• Batasan dan Pusat:

– Tetapkan lebar tetap.

– Gunakan margin-inline: auto; untuk memusatkannya secara horizontal.

Contoh Kode:

.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. Memusatkan Elemen dengan Ukuran Tidak Diketahui

Jika Anda tidak mengetahui ukuran elemennya, namun tetap ingin elemennya berada di tengah:

• Gunakan Konten yang Sesuai:

– width: fit-content; dan height: fit-content; memungkinkan elemen menyusut di sekitar isinya.

• Terapkan Pemusatan:

– Gabungkan dengan position: fixed; dan margin: auto; untuk memusatkannya.

Contoh Kode:

.element {

position: fixed;

inset: 0;

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

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

margin: auto; /* Centers the element */

}

Dengan metode ini, Anda dapat dengan mudah memusatkan elemen di area pandang, berapa pun ukurannya.

Metode 4: Cara Memusatkan DIV dengan CSS Grid

CSS Grid adalah alat yang ampuh untuk desain tata letak, dan sangat berguna untuk memusatkan elemen. Inilah cara Anda dapat dengan mudah memusatkan sesuatu secara horizontal dan vertikal menggunakan CSS Grid:

1. Memusatkan Satu Elemen

Untuk memusatkan elemen di dalam wadahnya, Anda dapat menggunakan pengaturan sederhana dengan CSS Grid:

• Atur Tampilan Kotak:

– display: grid; mengubah wadah menjadi kotak.

• Gunakan Konten Tempat:

– place-content: center; adalah pintasan yang memusatkan konten secara horizontal dan vertikal. Ini menetapkan justify-content (horizontal) dan align-content (vertical) ke center .

Contoh Kode:

css

.wadah {

tampilan: kisi;

konten tempat: tengah; /* Memusatkan konten secara horizontal dan vertikal */

}

Hal ini membuat elemen berada tepat di tengah wadahnya, berapa pun ukurannya.

2. Perbedaan dengan Flexbox

Meskipun CSS Grid dapat memusatkan item, perilakunya berbeda dibandingkan dengan Flexbox:

– Flexbox: Memusatkan item berdasarkan ukuran dan ukuran wadahnya.

– CSS Grid: Memusatkan item berdasarkan ukuran sel grid, yang dapat menjadi rumit jika ukuran sel grid tidak ditentukan.

Contoh Kode di Grid dengan Persentase:

css

.wadah {

tampilan: kisi;

konten tempat: tengah;

}

.elemen {

lebar: 50%; /* Lebarnya 50% dari sel grid */

tinggi: 50%; /* Tingginya adalah 50% dari sel grid */

}

Jika ukuran sel kisi tidak ditentukan, elemen mungkin akan lebih kecil dari yang diharapkan. Flexbox seringkali lebih sederhana untuk pemusatan dasar.

3. Memusatkan Beberapa Elemen

CSS Grid juga dapat menangani banyak elemen dalam sel yang sama:

• Tetapkan Beberapa Elemen ke Sel yang Sama:

– Gunakan grid-row dan grid-column untuk menempatkan item dalam sel kisi yang sama.

• Item Pusat di dalam Sel:

– Tambahkan place-items: center; untuk memusatkan item di dalam sel kisi.

Contoh Kode:

css

.wadah {

tampilan: kisi;

konten tempat: tengah; /* Memusatkan sel grid */

item tempat: tengah; /* Memusatkan item di dalam sel */

}

.elemen {

baris kisi: 1;

kolom kisi: 1; /* Semua elemen ditempatkan dalam sel yang sama */

}

Penyiapan ini menumpuk beberapa item di tengah wadah, meskipun ukurannya berbeda.

Poin Penting

– CSS Grid sangat bagus untuk tata letak yang kompleks dan saat Anda memerlukan kontrol penempatan yang tepat.

– Flexbox biasanya lebih sederhana untuk tugas pemusatan yang mudah.

Dengan dasar-dasar ini, Anda dapat menggunakan CSS Grid untuk memusatkan elemen tunggal dan ganda dalam berbagai skenario.

Metode 5: Cara Memusatkan Teks di CSS

Memusatkan teks sedikit berbeda dengan memusatkan elemen lain seperti gambar atau div. Berikut cara sederhana untuk menyelesaikannya:

Memusatkan Blok Teks

Saat Anda ingin memusatkan blok teks di dalam wadah (seperti paragraf dalam div), Anda menggunakan properti text-align . Ini berfungsi paling baik ketika teks berada dalam elemen tingkat blok, seperti div , p , atau h1 .

Berikut cara melakukannya:

css

.wadah {

perataan teks: tengah;

}

Kode ini memberitahu browser untuk memusatkan teks di dalam wadah. Jika Anda juga ingin memusatkan wadahnya sendiri, Anda dapat menggunakan Flexbox atau Grid untuk itu:

css

.wadah {

tampilan: fleksibel;

justify-content: tengah;

menyelaraskan-item: tengah;

tinggi: 100vh; /* Menjadikan container setinggi penuh untuk pemusatan vertikal */

}

Bagaimana dengan Flexbox dan Grid?

Flexbox dan Grid sangat bagus untuk memusatkan seluruh wadah, tetapi mereka tidak memusatkan teks di dalam wadah tersebut. Jika Anda menggunakan Flexbox atau Grid untuk memusatkan paragraf, ini akan memusatkan blok teks, bukan setiap baris atau karakter di dalamnya.

Memusatkan Teks dengan Flexbox

Jika Anda menggunakan Flexbox untuk memusatkan paragraf, seperti ini:

css

.wadah {

tampilan: fleksibel;

justify-content: tengah;

menyelaraskan-item: tengah;

tinggi: 100vh;

}

Ini memusatkan seluruh paragraf di dalam wadah. Namun untuk memusatkan teks itu sendiri di dalam paragraf itu, Anda juga memerlukan text-align: center; .

Fitur CSS Masa Depan

Ada perkembangan menarik dalam CSS! Fitur-fitur baru akan hadir yang akan membuat pemusatan menjadi lebih mudah. Untuk saat ini, gunakan Flexbox atau Grid dengan text-align: center; adalah cara terbaik untuk menanganinya.

Pendekatan sederhana ini membantu menjaga teks Anda terlihat bagus dan terpusat di mana pun teks itu berada di halaman Anda!

Namun mengingat semua metode di atas, Anda mungkin bingung mana yang paling cocok untuk berbagai situasi. Jika iya, simak kesimpulannya di bawah ini.

Kesimpulan

Di blog ini, Anda telah mempelajari cara memusatkan elemen DIV secara horizontal, vertikal, dan di tengah halaman menggunakan berbagai alat seperti Flexbox dan margin otomatis. Masing-masing alat ini memiliki manfaat dan skenario penggunaannya sendiri. Untuk membantu Anda, berikut beberapa kasus penggunaan umum:

• Margin Otomatis: Gunakan ini untuk pemusatan horizontal sederhana.
• Flexbox: Terbaik untuk memusatkan item di kedua arah dan saat bekerja dengan baris atau kolom item.
• Pemusatan Area Pandang: Ideal untuk pop-up atau elemen yang perlu dipusatkan pada layar.
• CSS Grid: Cocok untuk tata letak yang rumit dan ketika diperlukan pemusatan baris dan kolom.

Jika Anda memiliki pertanyaan atau keraguan mengenai postingan ini, silakan beri tahu kami di bagian komentar di bawah:

Rahul

Rahul Kumar adalah penggemar web, dan ahli strategi konten yang berspesialisasi dalam WordPress & hosting web. Dengan pengalaman bertahun-tahun dan komitmen untuk selalu mengikuti perkembangan tren industri, dia menciptakan strategi online efektif yang mengarahkan lalu lintas, meningkatkan keterlibatan, dan meningkatkan konversi. Perhatian Rahul terhadap detail dan kemampuannya membuat konten yang menarik menjadikannya aset berharga bagi merek mana pun yang ingin meningkatkan kehadiran online-nya.