Selamat Datang

Posisi Elemen Di Tengah Dengan CSS | Vertical & Horizontal

Dalam tutorial ini kita akan membuat posisi sebuah element berada di tengah layar dengan css.

Meletakan sebuah elemen agar posisinya berada ditengah secara horizontal tidaklah sulit, kita hanya perlu membuat text-align menjadi center, namun secara vertical kita membutuhkan beberapa trik untuk melakukan nya.
Center With CSS
Ada banyak trik yang bisa digunakan untuk membuat suatu element berada di tengah, namun kali ini kita hanya akan coba setidak nya 2 cara membuat sebuah element berada tepat berada di tengah.

Kita mulai membuat div dengan class container, dan didalam nya ada sebuah class lagi dengan nama box.

Struktur HTML nya seperti berikut ini.

	<div class="container">
		<div class="box">
			<strong>Goooogle</strong>
			<form action="#">
				<input type="text" name="" id=""><br>
				<input type="submit" value="Search">
			</form>
		</div>
	</div>

Center div.container

Pertama kita akan membuat class container agar berada di tengah dengan menambahkan CSS seperti berikut

.container{
	width:400px;
	height:200px;
	padding:20px;
	background:yellow;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -120px;
	margin-left: -220px;
}

Class container sekarang sudah berada di tengah layar, perlu diperhatikan disitu yaitu nilai dari top dan left yaitu 50%. Namun dengan settingan seperti itu yang berada diposisi tengah adalah sudut kiri atas dari kotak, untuk menyesuaikan nya maka kita perlu ubah margin-top dan margin-left, dimana keduanya didapat dengan perhitungan sebagai berikut.

Margin-top = height / 2 + padding

Margin-left = width / 2 + padding

Namun nilai nya harus minus (-) agar positinya bergeser ke atas dan ke kiri.

Demo 1

Center div.box

Untuk membuat class box berada di tengah juga maka kita akan mencoba dengan cara lain, yaitu dengan menambahkan display:table di class container, lalu display:table-cell di class box.
Code CSS nya kita tambahkan seperti ini.

.container{
	display: table;
}
.box{
	display: table-cell;
	text-align: center;
	vertical-align: middle;

	background:orange;
	border:50px solid rgba(0,0,0,.2);
}

Demo 2

Hasil

Untuk melengkapi demo ini agar lebih lengkap, kita tambahkan border.
Berikut ini code css selengkapnya

.container{
	border:20px solid rgba(0,0,0,.5);
	width: 400px;
	height: 200px;
	background: yellow;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -140px;
	margin-left: -240px;
	text-align: center;
	padding:40px;
	display: table;
}
.box{
	background:orange;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	border:50px solid rgba(0,0,0,.2);
}

Demo 3

Download code selengkapnya di Github:Gist Tutweb

Sekian tutorial kali ini, semoga bermanfaat.

Salam Web Design Indonesia





Penulis :

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

14 thoughts on “Posisi Elemen Di Tengah Dengan CSS | Vertical & Horizontal

  1. amdhas says:

    Apa bedanya jika hanya di clear:both; saja?

    Masih ada yang kurang sepertinya jika website ini belum valid HTML.

    Harus dong…membahas web development atau programing html harus peduli web standarts.

    • Maksudnya dibandingkan dengan clear:both bagian yang mana nya ya?

      Iya ini memang belum valid karena dibuat dengan buru-buru waktu launching nya :)

      Boleh minta saran valid HTML yang biasa anda pakai sebagai acuan? Kami ada rencana redesign februari nanti :) Kalau mau berkontribusi saran2 boleh juga untuk kami tampung.

  2. Suwondo says:

    Bedanya dengan clear:both; saja kemudian memanfaatkan margin-left:auto; kayaknya itu hanya menengahkan secara horisontal, sedangkan menengahkan secara vertical masih menjadi permasalahan.

    Kalau mengenai valid HTML dari web site ini, mungkin karena web site ini menggunakan CMS, dan tampilan diatur menggunakan Theme CMS yang tersedia. Untuk memvalidkan seluruh theme yang tidak dibuat valid semenjak awal terkadang malah lebih merepotkan. Bahkan untuk sekedar menelusuri ketidakvalidan satu per satu. Malah kalau dari para pengunjung merasa ada yang tidak valid, bisa memberikan masukan mengenai ketidak valid an tersebut dan saran untuk perbaikannya.

  3. zulfi says:

    makasih gan

  4. […] Sedangkan untuk membuat tulisan/huruf berada tepat ditengah-tengah kotak menggunakan display:table, display: table-cell; text-align: center;vertical-align: middle; penjelasan nya bisa dilihat di artikel terdahulu yaitu Posisi Elemen Di Tengah Dengan CSS | Vertical & Horizontal […]

  5. yussan says:

    jika saya menggunakan

    margin : 50% auto;

    apakah kelemahannya

    • Menurut anda kenapa tidak menggunakan margin: 50% 50%; atau margin: auto auto; saja ?

      Penggunaan 50% Tidak membuat element benar-benar berada di tengah secara vertical.

  6. syafiq says:

    gan cara gk usah tebel tebel gmn?

    tebel2 (yg ada warna kuning orange di hilangin gmn?)

  7. Terimakasih tutorialnya., sangat bermanfaat untuk website kami

  8. kalo backgroudnya dekstop gimana ya gan tpi yang di tengahnya itu google

  9. Jncrp says:

    Maaf gan, itu solusi jika height container sudah ditentukan saja, bukan auto device.

  10. Anjar says:

    Kalau agar body berada di tengah bagaimanakah cara mengatur css’nya?

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development