Centering HTML Element

Beberapa trick sederhana untuk centering HTML element dengan hanya menggunakan CSS.

Horizontal Centering

Metode yang biasanya digunakan untuk ini adalah HTML tag <center>. Meskipun kebanyakan browser masih support tag ini, akan tetapi direkomendasikan untuk tidak menggunakannya lagi. Karena berstatus deprecated atau sudah dihapus dari standard, sehingga kemungkinan feature yang diberikan tag ini bisa sewaktu-waktu tidak berfungsi sebagaimana mestinya.

Alternatively, kita bisa menggunakan beberapa metode (menggunakan CSS) berikut ini.

CSS: text-align: center

Cara ini hanya dapat digunakan untuk centering inline element atau text di dalam block element. Contoh penggunaan sebagai berikut:

<div id="contoh1">
  <span>TEXT</span>
</div>

<style type="text/css">
  #contoh1{
    background: grey;
    width: 200px;
    text-align: center;
  }
  #contoh1 span{
    background: crimson;
    color: #fff;
  }
</style>

Output:

CSS: display: flex; justify-content: center;

Metode ini sangatlah praktis, karena bisa digunakan baik pada inline element maupun block element:

<div id="contoh2">
  <span>TEXT</span>
</div>

<style type="text/css">
  #contoh2{
    background: grey;
    width: 200px;
    display: flex;
    justify-content: center;
  }
  #contoh2 span{
    background: brown;
    color: #fff;
  }
</style>

Output:

CSS: margin: 0 auto

Untuk block element, dapat dilakukan dengan memberi margin auto di kiri dan kanan element, seperti berikut:

<div id="contoh3">
  <div>TEXT</div>
</div>

<style type="text/css">
  #contoh3{
    background: grey;
    width: 200px;
  }
  #contoh3 div{
    background: cornflowerblue;
    margin: 0 auto;
    width: fit-content;
    color: #fff;
  }
</style>

Output:

margin: auto juga bisa digunakan untuk membuat block element rata kiri atau rata kanan.

<div id="contoh4">
  <div id="kiri"></div>
  <div id="kanan"></div>
</div>

<style type="text/css">
  #contoh4{
    background: grey;
    width: 200px;
  }
  #contoh4 div{
    width: 27%;
    height: 27px;
  }
  #kiri{
    background: lime;
    margin-right: auto;
  }
  #kanan{
    background: pink;
    margin-left: auto;
  }
</style>

Output:

CSS: position: absolute

Penentuan jarak (top, right, bottom, left) pada position: absolute memerlukan parent element dengan position: relative, kalau parent element tidak relative, maka posisi akan absolute terhadap element paling atas, yaitu body

<div id="contoh5">
  <span>TEXT</span>
</div>

<style type="text/css">
  #contoh5{
    background: grey;
    width: 200px;
    position: relative;
  }
  #contoh5::before{
    content: "\00a0";
  }
  #contoh5 span{
    background: chocolate;
    color: #fff;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
</style>

Output:

Penambahan pseudo ::before hanya untuk memberikan tinggi pada parent element, karena ukuran tinggi atau lebar dari absolute child element tidak akan memberikan pengaruh pada parent element.

Vertical Centering

Untuk membuat element dan atau text di dalam HTML element menjadi vertical centered, dapat dilakukan dengan beberapa metode. Untuk lebih jelasnya, mari kita lihat uraian di bawah ini.

CSS: line-height

Metode pertama adalah dengan setting line-height child element sesuai dengan tinggi parent element. Kelemahannya metode ini tidak bisa digunakan untuk konten dinamis.

<div id="contoh6">
  <span>TEXT</span>
</div>

<style type="text/css">
  #contoh6{
    background: grey;
    height: 200px;
    display: inline-block;
  }
  #contoh6 span{
    background: purple;
    line-height: 200px;
    color: #fff;
  }
</style>

Output:

CSS: display: flex; align-items: center;

Metode paling mudah adalah dengan menggunakan CSS display: flex atau display: inline-flex.

<div id="contoh7">
  <span>TEXT</span>
</div>

<style type="text/css">
  #contoh7{
    background: grey;
    height: 200px;
    display: inline-flex;
    align-items: center;
  }
  #contoh7 span{
    background: deeppink;
    color: #fff;
  }
</style>

Output:

CSS: vertical-lign: middle

Metode hanya akan bekerja pada element dengan CSS display: table-cell.

<div id="contoh8">
  <span>TEXT</span>
</div>

<style type="text/css">
  #contoh8{
    background: grey;
    height: 200px;
    display: table-cell;
    vertical-align: middle;
  }
  #contoh8 span{
    background: magenta;
    color: #fff;
  }
</style>

Output;

CSS: position: absolute

Contoh berikut adalah kombinasi vertical dan horizontal centering:

<div id="contoh9">
  <span>TEXT</span>
</div>

<style type="text/css">
  #contoh9{
    background: grey;
    height: 200px;
    position: relative;
  }
  #contoh9 span{
    background: yellowgreen;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>

Output:

CodePen