Cara Menengahkan Elemen dengan CSS

Membuat sebuah elemen agar bisa berada di tengah-tengah halaman web sebenarnya merupakan hal yang sederhana.

Tetapi hal ini sering sekali membuat para web developer pemula merasa bingung untuk melakukannya.

Pada tutorial kali ini, saya akan berbagi trik untuk membuat sebuah elemen atau item agar berada di tengah halaman atau elemen lain.

Ada 6 cara untuk melakukan hal tersebut dengan menggunakan CSS.

Berikut ini caranya:

1. Menggunakan Text-Align

Metode text-align: center ini sering digunakan untuk menengahkan sebuah teks judul artikel maupun halaman.

Namun cara ini juga bisa digunakan untuk menengahkan elemen lain seperti <div> secara horizontal.

Berikut ini langkah-langkah implementasinya:

• Buat elemen <div> sebagai parent dengan nama class box__container seperti ini <div class="box__container">.
• Buat elemen <div> baru sebagai child dari elemen di atas dengan nama box seperti ini <div class="box">.
• Pada class box__container tambahkan deklarasi text-align: center yang berfungsi untuk menengahkan elemen child atau class box.
• Pada class box tambahkan deklarasi display: inline-block untuk mengubah default display dari block agar dapat ditengahkan.
• Pada class box tambahkan juga properti tinggi, lebar, serta warna background sesuai selera kamu.

<div class="box__container">
    <div class="box"></div>
</div>

.box__container {
    text-align: center;
}
.box {
    display: inline-block;
    width: 200px;
    height: 100px;
    background: #b9f6ca;
}

2. Menggunakan Margin Auto

Cara kedua ini sering digunakan untuk menengahkan sebuah konten halaman secara horizontal seperti pada cara pertama.

Langsung saja ke langkah-langkah pembuatannya:

• Buat elemen <div> dengan nama class box seperti ini <div class="box">.

• Tambahkan style pada class box untuk menentukan lebar, tinggi, dan warnanya.

• Terakhir tambahkan juga margin: 0 auto pada class box. Properti ini yang membuat elemen bisa menjadi berada di tengah secara horizontal.

  Nilai 0 akan membuat margin top dan bottom menjadi 0px (bisa juga diganti nilai lain sesukamu).

  Sedangkan nilai auto akan mengatur secara otomatis margin-left dan margin-bottom agar elemen berada di tengah.

<div class="box"></div>

.box {
    width: 200px;
    height: 100px;
    background: #b9f6ca;
    margin: 0 auto;
}

Contoh lain untuk menengahkan gambar:

HTML CSS Preview

<img class="image" src="/images/gambar.jpg">

.image {
    display: block;
    border: 2px solid orange;
    margin: 0 auto;
}

3. Menggunakan Posisi Absolute

Pada materi tentang position CSS sudah dijelaskan mengenai perilaku posisi “absolute” yang tidak mengikuti aliran halaman.

Sehingga dengan posisi “absolute” kita bisa menempatkan elemen dimanapun pada halaman tanpa terpengaruh oleh posisi elemen lain.

Termasuk juga bisa digunakan untuk menengahkan elemen di dalam elemen lain.

Begini langkah-langkahnya:

• Buat elemen <div> sebagai parent dengan nama class box__container seperti <div class="box__container">
• Buat lagi elemen <div> sebagai child dengan nama class box seperti <div class="box">
• Tambahkan deklarasi position: relative pada class box__container untuk dijadikan acuan dari elemen child
• Pada class box tambahkan style lebar, tinggi, dan warna elemen.
• Kemudian tambahkan juga position: absolute
• Tambahkan lagi left: 50%
• Yang terakhir tambahkan margin-left dengan nilai negatif setengah dari lebar elemen “box”. Pada contoh ini lebar elemen box 200px, sehingga nilai setengahnya yaitu 100px. Jadi margin-left: -100px.

<div class="box__container">
<div class="box"></div>
</div>

.box__container {
    position: relative;
    height: 300px;
}
.box {
    position: absolute;
    width: 200px;
    height: 100px;
    background: #b9f6ca;
    left: 50%;
    margin-left: -100px;
}

4. Menggunakan Transform dan Translate

Cara-cara yang kita pelajari di atas, digunakan untuk menengahkan elemen secara horizontal.

Lalu bagaimana jika kita ingin membuat elemen agar bisa berada di tengah-tengah elemen lain secara vertikal dan horizontal.

Kita pakai cara ini:

• Buatlah 2 elemen <div> seperti pada contoh sebelumnya, serta atur lebar, tinggi, dan warnanya.
• Tambahkan position: absolute pada class “box”
• Tambahkan juga left dan top menjadi 50% pada class “box”
• Terakhir tambahkan transform: translate(-50%, -50%)

Sekarang lihat hasilnya…

Elemen box kamu bisa tepat berada ditengah-tengah.

<div class="box__container">
<div class="box"></div>
</div>

.box__container {
    position: relative;
    height: 300px;
}
.box {
    position: absolute;
    width: 200px;
    height: 100px;
    background: #b9f6ca;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

5. Menggunakan Flexbox

Ini merupakan cara favorit yang paling sering saya gunakan untuk membuat elemen agar bisa berada di tengah baik secara horizontal maupun vertikal.

Cara membuatnya mirip dengan cara-cara sebelumnya, namun menurut saya cara ini yang paling mudah dipahami oleh pemula.

Terutama untuk membuat elemen agar bisa di tengah-tengah secara vertikal dan horizontal.

Begini langkah-langkah membuatnya:

• Buat elemen <div> sebagai parent dengan nama class box__container seperti <div class="box__container">
• Buat lagi elemen <div> sebagai child dengan nama class box seperti <div class="box">
• Tambahkan CSS berikut pada class box__container:

  .box__container {
      display: flex;
      justify-content: center; /* membuat konten berada di tengah secara horizontal */
      align-items: center; /* membuat konten berada di tengah secara vertikal */
      height: 300px;
  }
  

• Pada class box tambahkan style lebar, tinggi, dan warna

<div class="box__container">
<div class="box"></div>
</div>

.box__container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
}
.box {
    width: 200px;
    height: 100px;
    background: #b9f6ca;
}

6. Di Tengah secara Vertikal

Cara terakhir ini digunakan untuk membuat elemen agar berada di tengah secara vertikal.

Caranya mirip dengan nomor 4 yaitu menggunakan position “absolute” dan “transform”.

Hanya style-nya saja yang diubah sedikit, jadi seperti ini:

.box {
    position: absolute;
    width: 200px;
    height: 100px;
    background: #b9f6ca;
    top: 50%;
    transform: translate(0, -50%)
}

<div class="box__container">
<div class="box"></div>
</div>

.box__container {
    position: relative;
    height: 300px;
}
.box {
    position: absolute;
    width: 200px;
    height: 100px;
    background: #b9f6ca;
    top: 50%;
    transform: translate(0, -50%)
}