Cara Membuat Posisi Elemen HTML Berada Di Tengah Secara Vertikal Dan Horizontal

Cara Membuat Posisi Elemen HTML Berada Di Tengah Secara Vertikal Dan Horizontal - Salah satu permasalahan dalam memposisikan elemen di HTML adalah membuatnya berada di tengah secara vertikal dan horizontal. Saya sendiri juga mengalami hal yang sama sebelumnya. Dan setelah mencari-cari saya menemukan caranya.
Untuk memposisikan elemen di tengah secara vertikal dan horizontal kita dapat mengaturnya di CSS. Ada dua cara yang dapat kaloan coba. Berikut akan saya berikan langkah-langkahnya.

Cara 1 : Menggunakan Position Absolute

Cara pertama yaitu menggunakan position absolute. Berikut adalah kodenya.
HTML

<div class='bungkus'>

<div></div>

</div>

CSS

.bungkus div {

position: absolute;
top: 50%;
left: 50%;
translate: translate(-50%, -50%);
height: 200 px;
width: 200 px;
background-color: #ED4C67;

}

Dan berikut hasilnya

Cara 2 : Menggunakan Tabel

Cara kedua yaitu menggunakan property display table. Langsung saja berikut kodenya.
HTML

<div class="bungkus">

<span class="tengah">Teks Tengah</span>

</div>

CSS

.bungkus {

display: table;
background-color: #1289A7;
height: 200px;
width: 50%;
color: #fff;

}
.tengah {

display: table-cell;
vertical-align: middle;
text-align: center;

}

Dan berikut hasilnya

Itulah dua cara untuk memposisikan elemen ke tengah secara vertikal dan horizontal, semoga bermanfaat.
Sekian postingan saya yang berjudul Cara Membuat Posisi Elemen HTML Berada Di Tengah Secara Vertikal Dan Horizontal.
Jangan lupa baca postingan saya sebelumnya 5 Aplikasi Text Editor Terbaik