skip to content
Stvns Blog

How to center a div

/ 2 min read

tips, tech

What’s div

Tag div (division) pada HTML adalah tag yang berfungsi untuk mengelompokkan elemen atau tag-tag menjadi satu grup. Tag ini memiliki banyak fungsi, di antaranya: Menyimpan elemen, Membuat layout, Mendefinisikan id atau class, Membatasi bagian, Menggantikan fungsi table.

Tag div dapat dianalogikan seperti kotak kosong, yang digunakan untuk mengelompokkan elemen-elemen lain tanpa memberikan makna khusus. Tag ini sangat populer di halaman web dan hampir semua halaman web menggunakan tag ini.

Example of div

index.html
<head>
  ...
</head>
<body>
  <div>Contoh Div</div>
</body>

Maka akan muncul tulisan “Contoh Div” pada halaman browser.

Styling Div

Sekarang, marilah kita menambahkan sedikit width, height, dan background-color untuk div tersebut.

style.css
div {
  width: 200px;
  height: 200px;
  background-color: lightgreen;
}

Center a div horizontally

Cara memposisikan div di tengah layar pada posisi horizontal adalah menambakan property css yaitu margin dengan sumbu y = 0 dan sumbu x = auto

style.css
div {
  width: 200px;
  height: 200px;
  background-color: lightgreen;
  margin: 0 auto;
}

Center a div vertically

Untuk memposisikan div di tengah pada posisi vertical sebenarnya lumayan ribet.Karena diperlukan pengetahuan khusus mengenai css flexbox, salah satu materi css yang lebih advance.

Pada bagian ini, kita perlu memodifikasi sedikit style dari tag body, dengan menambahkan property display: flex; agar tag tersebut dapat bersifat selayaknya flexbox.Kemudian diperlukan property justify-content: center; untuk menempatkan div di tengah secara horizontal.Dan yang terakhir adalah menetapkan height: 100vh; agar tinggi dari element body mengikuti tinggi dari viewport(layar) kita.

style.css
body {
  display: flex; /* Enable flexbox layout */
  justify-content: center; /* Center horizontally */
  height: 100vh; /* Full viewport height */
}


div {
  width: 200px;
  height: 200px;
  background-color: lightgreen;
  margin: 0 auto;
}

Center a div vertically & horizontally

Untuk menempatkan div tepat di tengah layar kita, kita bisa menggunakan konsep flexbox.Code yang digunakan pun tidak jauh beda dengan code yang digunakan untuk memposisikan div di tengah pada posisi vertical.Hanya saja ada tambahan satuj property css yaitu align-items: center;.Dengan begitu, div akan menempati bagian tengah pada halaman website secara vertikal & horizontal.

style.css
body {
  display: flex; /* Enable flexbox layout */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  height: 100vh; /* Full viewport height */
}


div {
  width: 200px;
  height: 200px;
  background-color: lightgreen;
  margin: 0 auto;
}