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.

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.

1	<div class="container">

2	<div class="box">

3	<strong>Goooogle</strong>

4	<form action="#">

5	<input type="text" name="" id=""><br>

6	<input type="submit" value="Search">

7

</form>

8

</div>

9

</div>

Center div.container

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

1	.container{

2	width:400px;

3	height:200px;

4	padding:20px;

5	background:yellow;

6	background: yellow;

7	position: fixed;

8

top: 50%;

9	left: 50%;

10	margin-top: -120px;

11	margin-left: -220px;

12

}

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.

1	.container{

2	display: table;

3

}

4

.box{

5	display: table-cell;

6	text-align: center;

7	vertical-align: middle;

8

9	background:orange;

10	border:50px solid rgba(0,0,0,.2);

11

}

Demo 2

Hasil

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

1	.container{

2	border:20px solid rgba(0,0,0,.5);

3	width: 400px;

4	height: 200px;

5	background: yellow;

6	position: fixed;

7

top: 50%;

8	left: 50%;

9	margin-top: -140px;

10	margin-left: -240px;

11	text-align: center;

12	padding:40px;

13	display: table;

14

}

15

.box{

16	background:orange;

17	display: table-cell;

18	text-align: center;

19	vertical-align: middle;

20	border:50px solid rgba(0,0,0,.2);

21

}

Demo 3
Download code selengkapnya di Github:Gist Tutweb
Sekian tutorial kali ini, semoga bermanfaat.
Salam Web Design Indonesia

Sumber : http://www.tutorial-webdesign.com/

Tweet