Home » How To » Cara Menempatkan Button di Posisi Tengah Secara Vertikal dan Horizontal

Cara Menempatkan Button di Posisi Tengah Secara Vertikal dan Horizontal

by Hanifah Nurbaeti
by Hanifah Nurbaeti

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

Cara Menengahkan Button Secara Vertikal

Contoh

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

.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 green; 
}

.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 button secara vertikal di dalam elemen kontainer:</p>

<div class="container">
  <div class="vertical-center">
    <button>Centered Button</button>
  </div>
</div>

</body>
</html>

Cara Menengahkan Button Secara Vertikal DAN Horizontal

Contoh

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

.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 blue; 
}

.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 tombol secara vertikal dan horizontal:</p>

<div class="container">
  <div class="center">
    <button>Centered Button</button>
  </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 blue;
}
<!DOCTYPE html>
<html>
<head>
<style>
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid blue; 
}
</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">
  <button>Centered Button</button>
</div>

</body>
</html>

You may also like