Original article How to Center Anything with CSS - Align a Div, Text, and More Membuat elemen di tengah adalah salah satu aspek paling sulit dalam sendiri sebenarnya tidak terlalu sulit untuk dipahami. Akan tetapi, sulit di sini lebih kepada banyaknya cara untuk memusatkan yang kamu gunakan dapat berbeda tergantung dengan elemen HTML yang kamu sedang coba untuk dipusatkan, atau apakah kamu ingin membuatnya di tengah secara horizontal atau tutorial ini, kami akan menjelaskan bagaimana memusatkan elemen-elemen yang berbeda secara horizontal, vertikal, dan juga secara horizontal dan vertikal Membuat Elemen di Tengah Secara HorizontalMemusatkan elemen di tengah secara horizontal biasanya lebih mudah dibandingkan secara vertikal. Berikut adalah beberapa elemen umum yang mungkin ingin kamu pusatkan secara horizontal beserta beberapa cara yang berbeda untuk Memusatkan Teks Menggunakan Properti CSS Text-Align CenterUntuk memusatkan teks atau tautan secara horizontal, gunakan properti text-align dengan nilai center Hello, centered World! .container { font-family arial; font-size 24px; margin 25px; width 350px; height 200px; outline dashed 1px black; } p { /* Pusatkan secara horizontal*/ text-align center; } Cara Memusatkan Div Menggunakan Margin Auto CSSGunakan properti margin singkat dengan nilai 0 auto untuk memusatkan elemen bertingkat blok seperti div secara horizontal .container { font-family arial; font-size 24px; margin 25px; width 350px; height 200px; outline dashed 1px black; } .child { width 50px; height 50px; background-color red; /* Pusatkan secara horizontal*/ margin 0 auto; } Cara Memusatkan Div Secara Horizontal Menggunakan FlexboxFlexbox adalah cara paling modern untuk membuat elemen di tengah pada suatu halaman, dan ia membuat proses desain layout responsif lebih mudah dibandingkan sebelumnya. Akan tetapi, flexbox belum sepenuhnya didukung pada beberapa browser lama seperti Internet membuat elemen di tengah secara horizontal menggunakan Flexbox, terapkan display flex dan justify-content center untuk elemen parent .container { font-family arial; font-size 24px; margin 25px; width 350px; height 200px; outline dashed 1px black; /* Pusatkan child secara horizontal*/ display flex; justify-content center; } .child { width 50px; height 50px; background-color red; } Cara Membuat Elemen di Tengah Secara VertikalMenempatkan elemen di tengah secara vertikal tanpa menggunakan metode modern seperti Flexbox bisa menjadi pekerjaan yang sulit. Di sini, kita akan membahas beberapa metode lama yang digunakan untuk memusatkan elemen di tengah secara vertikal dulu, lalu menunjukkan cara melakukannya dengan Menempatkan Div di Tengah Secara Vertikal dengan Pemosisian Absolut dan Margin Negatif CSSUntuk waktu yang lama, ini merupakan cara untuk menempatkan elemen-elemen di tengah secara vertikal. Untuk metode ini kamu harus mengetahui tinggi elemen yang ingin kamu isi properti position elemen parent dengan untuk elemen child, isi properti position dengan absolute dan top dengan 50% .container { font-family arial; font-size 24px; margin 25px; width 350px; height 200px; outline dashed 1px black; /* Atur */ position relative; } .child { width 50px; height 50px; background-color red; /* Pusatkan secara vertikal */ position absolute; top 50%; } Tetapi, ini hanya memusatkan sisi atas dari elemen betul-betul memusatkan elemen child, atur properti margin-top menjadi -setengah tinggi elemen child.container { font-family arial; font-size 24px; margin 25px; width 350px; height 200px; outline dashed 1px black; /* Atur */ position relative; } .child { width 50px; height 50px; background-color red; /* Pusatkan secara vertikal */ position absolute; top 50%; margin-top -25px; /* Setengah tinggi elemen ini */ }Cara Menempatkan Div di Tengah Secara Vertikal Menggunakan Transform dan TranslateKalau kamu tidak tahu tinggi elemen yang kamu ingin pusatkan atau meskipun kamu tahu juga, metode ini adalah trik yang ini sangat mirip dengan metode margin negatif di atas. Atur properti position elemen parent menjadi elemen child, atur properti position menjadi absolute dan atur top menjadi 50%. Sekarang, alih-alih menggunakan margin negatif untuk betul-betul memusatkan elemen child, gunakan transform translate0, -50% saja .container { font-family arial; font-size 24px; margin 25px; width 350px; height 200px; outline dashed 1px black; /* Atur */ position relative; } .child { width 50px; height 50px; background-color red; /* Pusatkan secara vertikal*/ position absolute; top 50%; transform translate0, -50%; } Ingat bahwa translate0, -50% adalah singkatan dari translateX0 dan translateY-50%. Kamu juga bisa memakai transform translateY-50% untuk memusatkan elemen child secara Membuat Div di Tengah Secara Vertikal dengan FlexboxSeperti memusatkan elemen secara horizontal, Flexbox membuat memusatkan elemen secara vertikal menjadi sangat memusatkan elemen secara vertikal, terapkan display flex dan align-items center pada elemen parent .container { font-family arial; font-size 24px; margin 25px; width 350px; height 200px; outline dashed 1px black; /* Pusatkan secara vertikal*/ display flex; align-items center; } .child { width 50px; height 50px; background-color red; } Cara Memusatkan Elemen Secara Vertikal dan HorizontalCara Menempatkan Div di Tengah dengan Pemosisian Absolut dan Margin Negatif CSSIni sangat mirip dengan metode di atas untuk memusatkan elemen secara vertikal. Seperti sebelumnya, kamu harus mengetahui lebar dan tinggi elemen yang mau kamu properti position elemen parent menjadi atur properti position child menjadi absolute, top menjadi 50%, dan left menjadi 50%. Ini hanya memusatkan sudut kiri atas elemen child secara vertikal dan betul-betul memusatkan elemen child, terapkan margin negatif atas, atur menjadi setengah tinggi elemen, dan margin negatif kiri, atur menjadi setengah lebar elemen child .container { font-family arial; font-size 24px; margin 25px; width 350px; height 200px; outline dashed 1px black; /* Atur */ position relative; } .child { width 50px; height 50px; background-color red; /* Pusatkan secara vertikal dan horizontal */ position absolute; top 50%; left 50%; margin -25px 0 0 -25px; /* Terapkan margin negatif atas dan kiri supaya betul-betul memusatkan elemennya*/ } Cara Membuat Div di Tengah Secara Vertikal dan Horizontal dengan Transform dan TranslateGunakan metode ini untuk membuat elemen di tengah jika kamu tidak tahu dimensi persisnya dan tidak bisa menggunakan atur properti position elemen parent menjadi atur properti position elemen child menjadi absolute, top menjadi 50%, dan left menjadi 50%.Terakhir, gunakan transform translate-50%, -50% supaya betul-betul memusatkan elemen child .container { font-family arial; font-size 24px; margin 25px; width 350px; height 200px; outline dashed 1px black; /* Setup */ position relative; } .child { width 50px; height 50px; background-color red; /* Center vertically and horizontally */ position absolute; top 50%; left 50%; transform translate-50%, -50%; } Cara Membuat Div di Tengah Secara Vertikal dan Horizontal dengan FlexboxFlexbox adalah cara yang paling gampang untuk membuat elemen di tengah secara vertikal dan hanyalah gabungan dua metode-metode Flexbox sebelumnya. Untuk membuat elemen di tengah secara horizontal atau vertikal, terapkan justify-content center dan align-items center pada elemen parent .container { font-family arial; font-size 24px; margin 25px; width 350px; height 200px; outline dashed 1px black; /* Pusatkan secara vertikal dan horizontal */ display flex; justify-content center; align-items center; } .child { width 50px; height 50px; background-color red; } Itulah semua yang kamu perlu tahu mengenai cara membuat elemen di tengah menggunakan cara-cara yang terbaik. Sekarang, cobalah memusatkan semua elemennya. Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started