
Super simpel css center container secara vertical dan horizontal
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.
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"
/>
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>
Comment
comments powered by Disqus