How To

Cara Memusatkan Element Secara Vertikal dan Horizontal

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>

Hanifah Nurbaeti

Share
Tags: CSSHow To