Super simpel css center container secara vertical dan horizontal

5 Jul 2020
#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

Inilah dia style CSS yang super simple untuk layout secara vertical dan horizontal.

	<style>
		html,body {
			height: 100%
		}
		.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 {
        height: 100%;
      }
      .container {
        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

Masih ada code lain yang lebih super simple sakti.

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

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

Sharing

Comment