Pemusatan adalah salah satu aspek CSS yang paling sulit.
Metodenya sendiri biasanya tidak sulit untuk dipahami. Sebaliknya, ini lebih disebabkan oleh fakta bahwa ada begitu banyak cara untuk memusatkan sesuatu.
Metode yang Anda gunakan dapat bervariasi tergantung pada elemen HTML yang Anda coba pusatkan, atau apakah Anda memusatkannya secara horizontal atau vertikal.
Dalam tutorial ini, kita akan membahas bagaimana memusatkan elemen yang berbeda secara horizontal, vertikal, dan vertikal dan horizontal.
Cara Memusatkan Secara Horizontal
Memusatkan elemen secara horizontal umumnya lebih mudah daripada memusatkan secara vertikal. Berikut adalah beberapa elemen umum yang mungkin ingin Anda pusatkan secara horizontal dan berbagai cara untuk melakukannya.
Cara Memusatkan Teks dengan Properti CSS Text-Align Center
Untuk memusatkan teks atau tautan secara horizontal, cukup gunakan text-alignproperti dengan nilai center:
Hello, (centered) World!
p { text-align: center; }
Cara Memusatkan Div dengan CSS Margin Auto
Gunakan marginproperti singkatan dengan nilai 0 autountuk memusatkan elemen tingkat blok seperti secara divhorizontal:
.child { ... margin: 0 auto; }
Cara Memusatkan Div Secara Horizontal dengan Flexbox
Flexbox adalah cara paling modern untuk memusatkan berbagai hal di halaman, dan membuat desain tata letak responsif jauh lebih mudah daripada sebelumnya. Namun, itu tidak sepenuhnya didukung di beberapa browser lama seperti Internet Explorer.
Untuk memusatkan elemen secara horizontal dengan Flexbox, cukup terapkan display: flexdan justify-content: centerke elemen induk:
.container { ... display: flex; justify-content: center; }
Cara Memusatkan Secara Vertikal
Memusatkan elemen secara vertikal tanpa metode modern seperti Flexbox bisa menjadi pekerjaan rumah yang nyata. Di sini kita akan membahas beberapa metode lama untuk memusatkan hal-hal secara vertikal terlebih dahulu, lalu menunjukkan kepada Anda bagaimana melakukannya dengan Flexbox.
Cara Memusatkan Div Secara Vertikal dengan CSS Absolute Positioning dan Negative Margins
Untuk waktu yang lama ini adalah cara terbaik untuk memusatkan berbagai hal secara vertikal. Untuk metode ini Anda harus mengetahui ketinggian elemen yang ingin Anda pusatkan.
Pertama, setel displayproperti elemen induk ke relative.
Kemudian untuk elemen anak, setel displayproperti ke absolutedan topke 50%:
.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically */ position: absolute; top: 50%; }
Tapi itu benar-benar hanya memusatkan tepi atas elemen anak secara vertikal.
Untuk benar-benar memusatkan elemen anak, setel margin-topproperti ke -(half the child element's height):
.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically */ position: absolute; top: 50%; margin-top: -25px; /* half this element's height */ }
Cara Memusatkan Div Secara Vertikal dengan Transformasi dan Terjemahkan
Jika Anda tidak mengetahui ketinggian elemen yang ingin Anda pusatkan (atau bahkan jika Anda tahu), metode ini adalah trik yang bagus.
Metode ini sangat mirip dengan metode margin negatif di atas. Setel displayproperti elemen induk ke relative.
Untuk elemen anak, setel displayproperti ke absolutedan setel topke 50%. Sekarang alih-alih menggunakan margin negatif untuk benar-benar menengahkan elemen anak, cukup gunakan transform: translate(0, -50%):
.container { ... position: relative; } .child { ... position: absolute; top: 50%; transform: translate(0, -50%); }
Perhatikan bahwa translate(0, -50%)singkatan dari translateX(0)dan translateY(-50%). Anda juga bisa menulis transform: translateY(-50%)untuk memusatkan elemen anak secara vertikal.
Cara Memusatkan Div Secara Vertikal dengan Flexbox
Seperti memusatkan benda secara horizontal, Flexbox membuatnya sangat mudah untuk memusatkan benda secara vertikal.
Untuk memusatkan elemen secara vertikal, terapkan display: flexdan align-items: centerke elemen induk:
.container { ... display: flex; align-items: center; }
Bagaimana Memusatkan Baik Secara Vertikal dan Horizontal
Cara Memusatkan Div Secara Vertikal dan Horizontal dengan CSS Absolute Positioning dan Margin Negatif
Ini sangat mirip dengan metode di atas untuk memusatkan elemen secara vertikal. Seperti terakhir kali, Anda harus mengetahui lebar dan tinggi elemen yang ingin Anda pusatkan.
Setel displayproperti elemen induk ke relative.
Kemudian setel displayproperti anak ke absolute, topke 50%, dan leftke 50%. Ini hanya memusatkan sudut kiri atas elemen anak secara vertikal dan horizontal.
Untuk benar-benar menengahkan elemen turunan, terapkan set margin atas negatif ke setengah tinggi elemen turunan, dan margin kiri negatif disetel ke separuh lebar elemen turunan:
.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically and horizontally */ position: absolute; top: 50%; left: 50%; margin: -25px 0 0 -25px; /* apply negative top and left margins to truly center the element */ }
Cara Memusatkan Div Secara Vertikal dan Horizontal dengan Transformasi dan Terjemahkan
Use this method to center an element vertically and horizontally if you don't know its exact dimensions and can't use Flexbox.
First, set the display property of the parent element to relative.
Next, set the child element's display property to absolute, top to 50%, and left to 50%.
Finally, use transform: translate(-50%, -50%) to truly center the child element:
.container { ... position: relative; } .child { ... position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
How to Center a Div Vertically and Horizontally with Flexbox
Flexbox is the easiest way to center an element both vertically and horizontally.
This is really just a combination of the two previous Flexbox methods. Then apply justify-content: center and align-items: center to center the child element(s) horizontally and vertically:
.container { ... display: flex; justify-content: center; align-items: center; }
That's everything you need to know to center with the best of 'em. Now go forth and center all the things.