3 Metode/Cara untuk Menengahkan Div menggunakan CSS Styling

Ada kalanya sebagai web designer kita sempat bingung untuk sekedar membuat element dalam div ke tengah. Alhasil, kita sering menggunakan jalan pintas dengan langsung menggunakan syntax <center>Button</center>. Berikut adalah beberapa contoh teknik untuk menengahkan element dalam div.

Metode 1: Memanfaatkan Fleksibilitas Flexbox

Kita bisa menggunakan flexbox layout untuk menengahkan div secara horizontal dan vertikal. Berikut contoh syntaxnya: 

    
<div style="display: flex; align-items: center; justify-content: center;">
  <button>Button</button>
</div>
    

Metode 2: Menggunakan Absolute Positioning

Kita bia menggunakan absolute positioning untuk menengahkan div secara horizontal dan vertikal. Berikut contoh syntaxnya:

    
<div style="position: relative; height: 100vh;">
  <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
    <button>Button</button>
  </div>
</div>
    

Metode 3: Menggunakan CSS Grid

Kita bisa menggunakan CSS grid untuk menengahkan div secara horizontal dan vertikal. Berikut contoh syntaxnya:

    
<div style="display: grid; place-items: center; height: 100vh;">
  <button>Button</button>
</div>
    

Metode diatas akan menengahkan element div secara horizontal dan vertikal di suatu halaman website. Kalian bisa mengatur gaya dan dimensi sesuai kebutuhan.

Sebagai catatan, contoh-contoh diatas baik untuk digunakan secara inline demi kesederhanaan jika website kita tidak memerlukan CSS eksternal. Jika proyek anda sudah begitu besar, direkomendasikan menggunakan CSS framework.