Super simpel css center container secara vertical dan horizontal

5 Jul 2020 - Last updated 29 Apr 2021
#css

Inilah cara super simpel agar sebuah teks, gambar, div container dan element html lainnya berada di tengah secara vertikal dan horizontal.

Sebelumnya, sudah ada juga code Cara simpel css layout vertical center, tapi menggunakan framework Basscss.

Code itu, baru bisa jalan sempurna di lingkungan Basscss, untuk menampilkan box di browser pas tepat ditengah-tengah.

Insert code yang baru ini, tampa menggunakan css framework. Kode ini memamfaatkan css flexbox.

Implementasi yang sering digunakan pada halaman login sebuah website, seperti halaman login wp-admin WordPress, box form login pas berada di tengah-tengah.

Saya sendiri menggunakan kode simple ini untuk membuat form login Hotspot WiFI server Mikrotik.

CSS layout center thing

Berikut ini style CSS yang super simple untuk layout secara vertical dan horizontal.

	<style>
	/* Input parent value */
		html,body {
			height: 100%
		}
	/* Input child value */
		.container {
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	</style>

Template HTML CSS layout secara vertikal dan horizontal.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>InsertApps - Super Simple CSS Layout Vertikal Horizontal</title>
    <style>
      html,
      body {
		/* Set parent value */
        height: 100%;
      }
      .container {
		/* Set child value */
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="item">
        Hello Word!
      </div>
    </div>
  </body>
</html>

Untuk hasil yang lebih baik, tambahkan css reserter seperti normalize.css untuk menormal style default browser Chrome, Firefox, Opera, Safari dan browser lainnya.

<link
  rel="stylesheet"
  href="https://necolas.github.io/normalize.css/8.0.1/normalize.css"
/>

Live Demo

Tampa property Height

Kode di atas bergantung pada ukuran tinggi body lebih dulu set ke 100%. Kemudian ukuran container juga harus di setting ke height:100% juga.

Pertanyaanya: Hi CSS, Why doesn’t percentage height work?

Jawabannya silahkan baca sendiri di https://stackoverflow.com/questions/1622027/percentage-height-html-5-css.

CSS height baru berfungsi kalau div parent (induk) memiliki nilai property height yang eksplisit, artinya : jelas, tegas, gamblang, tidak tersembunyi, tidak bertele-tele.

Maka nilai height: 100% akan berfungsi pada div turunannya.

Untuk menghilangkan ketergantungan pada div indux, cukup ganti property height: 100% dengan property position: absolute;.

Kemudian set lebar dan tingginya dengan nilai top, right, bottom dan left.

.container {
	/*Set height*/
	position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
	left: 0;
	/*Layout */
	display: flex;
    justify-content: center;
    align-items: center;
}

Tampa property position

Dengan menghilangkan property position: absolute; dan top: 0;, right: 0;, bottom: 0; dan left: 0; cukup ganti dengan property height: dengan value 100vh;

.container {
  height:100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

Jadinya lebih ringkas.

Menggunakan CSS Grid

Masih ada code lain yang lebih super simple sakti, menggunakan CSS grid.

.parent {
    display: grid;
    place-items: center;
  }

<div class="parent bg-blue" >
  <div class="box bg-orange">
    Hello Word..
  </div>

Tampa property Height

Tampa property position

Menggunakan CSS Grid

Sharing

Comment