Cara Memusatkan Element Secara Vertikal dan Horizontal

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti March 9, 2021

Di bawah ini kita akan mempelajari cara memusatkan elemen secara vertikal dan horizontal dengan CSS.

Cara Memusatkan Sesuatu Secara Vertikal

Contoh

<style>
.container {
  height: 200px;
  position: relative;
  border: 3px solid blue;
}

.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
</style>

<!DOCTYPE html>
<html>
<head>
<style>
.container { 
  height: 200px;
  position: relative;
  border: 3px solid blue; 
}

.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
</style>
</head>
<body>

<h2>Vertical Center</h2>
<p>Dalam contoh ini, kita akan menggunakan pemosisian dan properti transformasi untuk memusatkan elemen secara vertikal di dalam elemen kontainer:</p>

<div class="container">
  <div class="vertical-center">
    <p>Posisi center yang vertikal.</p>
  </div>
</div>

</body>
</html>

Cara Memusatkan Secara Vertikal DAN Horizontal

Contoh

<style>
.container {
  height: 200px;
  position: relative;
  border: 3px solid green;
}

.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
</style>

<!DOCTYPE html>
<html>
<head>
<style>
.container { 
  height: 200px;
  position: relative;
  border: 3px solid red; 
  }

.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<h2>Centering</h2>
<p>Dalam contoh ini, kita akan menggunakan pemosisian dan properti transformasi untuk memusatkan elemen div secara vertikal dan horizontal:</p>

<div class="container">
  <div class="center">
    <p>Posisi di tengah secara vertikal dan horizontal.</p>
  </div>
</div>

</body>
</html>

Bisa juga menggunakan flexbox untuk menengahkan:
Contoh

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid black;
}

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid black; 
}
</style>
</head>
<body>

<h1>Centering</h1>

<p>Sebuah container dengan properti justify-content dan align-items yang disetel ke <em> center </em> akan meratakan item di tengah (di kedua sumbu).</p>

<div class="center">
   <p>Posisi di tengah secara vertikal dan horizontal.</p>
</div>

</body>
</html>