{{ message }}

Trik Membuat Konten Ditengah Vertical Horizontal Dengan CSS

09/07/2017 | HTML/CSS
Trik Membuat Konten Ditengah Vertical Horizontal Dengan CSS

Terkadang kita ingin membuat suatu konten yg letaknya pas ditengah-tengah halaman, bahkan ingin untuk menempatkannya pas ditengah secara vertical maupun horizontal. Misalnya membuat form login yg tampil ditengah halaman, floating box untuk iklan yg muncul ditengah halaman ataupun kotak dialog konfirmasi yg muncul pas ditengah halaman.

Experiment kali ini, kita akan mencoba membuat box konten yg akan kita letakan pas ditengah-tengah halaman. Tapi sebelumnya kita akan membahas style konten normal umum yg dipakai untuk merata tengahkan secara horizontal.

Rata Tengah Horizontal

Umumnya frontend developer membuat div rata ditengah secara horizontal dengan membuat margin left dan right menjadi auto. Kita bisa liat contoh kode berikut ini;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Rata Tengah</title>
 
    <style type="text/css">
 
      .center-box {
        width: 980px;
        background: cyan;
        margin: 0 auto;
      }
 
    </style>
  </head>
  <body>
 
    <div class="center-box">
      <h1>Rata Tengah</h1>
    </div>
 
  </body>
</html>

Ini adalah cara normal bagi para developer frontend untuk meletakan konten ketengah halaman secara horizontal. Disini konten harus memiliki ketetapan lebar, lalu kita dapat meletakannya ketengah dengan style “margin: 0 auto”. Atau juga bisa diganti dengan;

...
...
margin-left: auto;
margin-right: auto;
...
...

Rata Tengah Vertical Horizontal

Sekarang kita akan masuk ke kasus utama kita, yaitu menempatkan konten pas ditengah secara Vertical dan Horizontal. Triknya adalah menggunakan CSS position, baiklah pertama kita mencoba membuat konten ketengah secara horizontal dulu menggunakan CSS position, update class center-box tadi menjadi seperti ini;

...
...
      .center-horizontal {
        position: fixed;
        left: 50%;
        width: 300px;
        background: cyan;
      }
...
...

Dengan seperti itu maka bisa dibilang konten hampir berada ditengah secara horizontal. Namun hanya pinggir sebelah kiri konten yg tepat berada ditengah. Ini dikarenakan left: 50% menempatkan posisi konten ke tengah layar dengan cara berpatokan pada tepi kiri konten ke posisi setengah layar (50%). Tapi yg kita butuhkan bukan itu, kita butuh untuk meletakan konten ditengah bukan berpatokan pada tepi kiri konten, melainkan titik tengah dari konten itu sendiri. Sekarang kita update class tadi menjadi seperti ini;

...
...
    .center-horizontal {
      position: fixed;
      left: 50%;
      width: 300px;
      margin-left: -150px; /* tambahkan ini */
      background: cyan;
    }
...
...

Sekarang dapat Anda coba di web browser Anda, konten sudah benar-benar ditengah bukan? Sebenarnya gampang sekali teorinya, kita memiliki konten dengan lebar tetap yaitu 300px, lalu pada kasus ini kita butuh untuk menempatkan konten berpatokan pada titik tengah konten. Untuk mendapatkan titik tengah konten caranya adalah mudah yaitu lebar dari konten dibagi 2 dalam hal ini 300px/2 = 150px. Karena letak tepi kiri konten sudah di tengah layar, kita hanya perlu mundur 150px ke belakang dengan menggunakan margin-left: -150px.

Jika Anda sudah paham pada pembahasan kita diatas, sekarang akan sangat mudah bagi Anda untuk menempatkan konten terserbut juga secara vertical selain horizontal. Caranya adalah mudah yaitu dengan memberikan tinggi tetap dari konten (height: 300px) lalu menempatkan posisi tepi atas konten ke tengah layar (top: 50%). Setelah itu mengangkat naik posisinya dengan jarak setengah tinggi dari tinggi tetap konten (margin-top: -150px). Berikut ini Anda dapat melihat keseluruhan kodenya di section Source Code Lengkap.

Selain untuk posisi yg tetap (position: fixed) Anda dapat juga menggunakan trik ini dengan mengubah posisi menjadi (position: absolute) dan berpatokan pada konten yg posisinya relative (position: relative). Anda dapat menerapkan trik ini sesuai kebutuhan Anda.

Source Code Lengkap

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Rata Tengah</title>
 
    <style type="text/css">
 
    .center-horizontal {
      position: fixed;
      left: 50%;
      width: 400px;
      margin-left: -200px;
      top: 50%;
      height: 300px;
      margin-top: -150px;
      background: cyan;
    }
 
    </style>
  </head>
  <body>
 
    <div class="center-horizontal">
      <h1>Rata Tengah</h1>
    </div>
 
  </body>
</html>