7/22/2019

Selamat Datang Posisi Elemen Di Tengah Dengan CSS | Vertical & Horizontal | Tutorial Web Design

(http://www.tutorial-webdesign.com/)

Tutorial Web Design

(http://www.tutorial-
webdesign.com/)
Web Design & Development + Graphic Design Indonesia

Follow @tut_web 4,037 followers

HOME (HTTP://WWW.TUTORIAL-WEBDESIGN.COM)

WEB DEVELOPMENT (HTTP://WWW.TUTORIAL-WEBDESIGN.COM/CATEGORY/WEB-DEVELOPMENT/)

WEB DESIGN (HTTP://WWW.TUTORIAL-WEBDESIGN.COM/CATEGORY/WEB-DESIGN/)

TUTORIAL (HTTP://WWW.TUTORIAL-WEBDESIGN.COM/CATEGORY/TUTORIAL/)

TIPS & TRICKS (HTTP://WWW.TUTORIAL-WEBDESIGN.COM/CATEGORY/TIPS-TRICKS/)

NEWS (HTTP://WWW.TUTORIAL-WEBDESIGN.COM/CATEGORY/NEWS/)

INSPIRATION (HTTP://WWW.TUTORIAL-WEBDESIGN.COM/CATEGORY/INSPIRATION/)

GRAPHIC DESIGN (HTTP://WWW.TUTORIAL-WEBDESIGN.COM/CATEGORY/GRAPHIC-DESIGN/)

FREEBIE (HTTP://WWW.TUTORIAL-WEBDESIGN.COM/CATEGORY/FREEBIE/)

Search

About (http://www.tutorial-webdesign.com/about/) Artikel (http://www.tutorial-webdesign.com/articles/)

Keuntungan Menulis (http://www.tutorial-webdesign.com/keuntungan-menulis/)

Menjadi penulis TWD (http://www.tutorial-webdesign.com/menjadi-penulis/)

Partner (http://www.tutorial-webdesign.com/partner/) Resources (http://www.tutorial-webdesign.com/resource/)

(https://www.facebook.com/tutwebdesign) (http://www.twitter.com/tut_web)

(http://plus.google.com/111362047546002612156?rel=me) (http://feeds.feedburner.com/tut_web)

Topik

www.tutorial-webdesign.com/posisi-center-dengan-css/ 1/17
7/22/2019 Posisi Elemen Di Tengah Dengan CSS | Vertical & Horizontal | Tutorial Web Design
CSS (http://www.tutorial-webdesign.com/tag/css/)

CSS3 (http://www.tutorial-webdesign.com/tag/css3/)

HTML5 (http://www.tutorial-webdesign.com/tag/html5/)
PHP (http://www.tutorial-webdesign.com/tag/php/)

Jquery (http://www.tutorial-webdesign.com/tag/jquery/)

Android (http://www.tutorial-webdesign.com/tag/android/)
Photoshop (http://www.tutorial-webdesign.com/tag/photoshop/)

WordPress (http://www.tutorial-webdesign.com/tag/wordpress/)

Infographic (http://www.tutorial-webdesign.com/tag/infographic/)
Photography (http://www.tutorial-webdesign.com/tag/photography/)

Framework (http://www.tutorial-webdesign.com/tag/framework/)
Javascript (http://www.tutorial-webdesign.com/tag/javascript/)
Web Design (http://www.tutorial-webdesign.com/tag/web-design/)

Web Development (http://www.tutorial-webdesign.com/tag/website-development/)

SEO (http://www.tutorial-webdesign.com/tag/seo/)
Htaccess (http://www.tutorial-webdesign.com/tag/htaccess/)

Responsive Web (http://www.tutorial-webdesign.com/tag/responsive-web-design/)

Typography (http://www.tutorial-webdesign.com/tag/typography/)
Codeigniter (http://www.tutorial-webdesign.com/tag/codeigniter/)

Pop Art (http://www.tutorial-webdesign.com/tag/pop-art/)

Template (http://www.tutorial-webdesign.com/tag/template/)

Layout (http://www.tutorial-webdesign.com/tag/layout/)
HTML (http://www.tutorial-webdesign.com/tag/html/)
Htaccess (http://www.tutorial-webdesign.com/tag/htaccess/)

Security (http://www.tutorial-webdesign.com/tag/security/)
Contoh Web (http://www.tutorial-webdesign.com/tag/contoh-web/)
WPAP (http://www.tutorial-webdesign.com/tag/wpap/)

Tags
Adaptive Web (http://www.tutorial-webdesign.com/tag/adaptive-web/) Belajar
CSS3 (http://www.tutorial-webdesign.com/tag/belajar-css3/) Belajar CSS Layout (http://www.tutorial-
webdesign.com/tag/belajar-css-layout/) Belajar HTML5 (http://www.tutorial-webdesign.com/tag/belajar-html5/) Belajar PHP
(http://www.tutorial-webdesign.com/tag/belajar-php/) Belajar Web (http://www.tutorial-
webdesign.com/tag/belajar-web/) Belajar Web Design (http://www.tutorial-
webdesign.com/tag/belajar-web-design/) Belajar Web Pemula (http://www.tutorial-webdesign.com/tag/belajar-web-
pemula/) Cara Membuat Web (http://www.tutorial-webdesign.com/tag/cara-membuat-web/) Cara
www.tutorial-webdesign.com/posisi-center-dengan-css/ 2/17
 Membuat Website (http://www.tutorial-webdesign.com/tag/cara-membuat-website/)
7/22/2019 Posisi Elemen Di Tengah Dengan CSS | Vertical & Horizontal | Tutorial Web Design

Codeigniter (http://www.tutorial-webdesign.com/tag/codeigniter/) Codeigniter Pemula (http://www.tutorial-

webdesign.com/tag/codeigniter-pemula/) Codeigniter Untuk Pemula (http://www.tutorial-webdesign.com/tag/codeigniter-untuk-pemula/)

CSS (http://www.tutorial-webdesign.com/tag/css/) CSS3

(http://www.tutorial-webdesign.com/tag/css3/) Desain Web
Desain Web Responsif
(http://www.tutorial-webdesign.com/tag/desain-web/)
(http://www.tutorial-webdesign.com/tag/desain-web-responsif/) Desain
Web Responsive (http://www.tutorial-webdesign.com/tag/desain-web-
responsive/) Framework (http://www.tutorial-webdesign.com/tag/framework/) Freebies
(http://www.tutorial-webdesign.com/tag/freebies/) HTML (http://www.tutorial-
webdesign.com/tag/html/) HTML5 (http://www.tutorial-
webdesign.com/tag/html5/) Infographic (http://www.tutorial-webdesign.com/tag/infographic/) Javascript
(http://www.tutorial-webdesign.com/tag/javascript/) Jquery
(http://www.tutorial-webdesign.com/tag/jquery/) Kelebihan CSS3 (http://www.tutorial-
webdesign.com/tag/kelebihan-css3/) Kemampuan CSS3 (http://www.tutorial-webdesign.com/tag/kemampuan-css3/) Layout
(http://www.tutorial-webdesign.com/tag/layout/) Menu (http://www.tutorial-webdesign.com/tag/menu/)
Mobile web (http://www.tutorial-webdesign.com/tag/mobile-web/)
Photoshop (http://www.tutorial-webdesign.com/tag/photoshop/) PHP (http://www.tutorial-

webdesign.com/tag/php/) PHP Framework (http://www.tutorial-webdesign.com/tag/php-framework/)

Responsive (http://www.tutorial-webdesign.com/tag/responsive/)
Responsive Web (http://www.tutorial-
webdesign.com/tag/responsive-web/) Responsive Web Design
(http://www.tutorial-webdesign.com/tag/responsive-web-design/)
Template (http://www.tutorial-webdesign.com/tag/template/) Tools (http://www.tutorial-webdesign.com/tag/tools/)
UX (http://www.tutorial-webdesign.com/tag/ux/) Video (http://www.tutorial-webdesign.com/tag/video/) Web
Design (http://www.tutorial-
webdesign.com/tag/web-design/) Web Designer
(http://www.tutorial-webdesign.com/tag/web-designer/) Web
Development
(http://www.tutorial-webdesign.com/tag/website-development/) Wordpress
(http://www.tutorial-webdesign.com/tag/wordpress/) Workflow (http://www.tutorial-webdesign.com/tag/workflow/)

Posisi Elemen Di Tengah Dengan CSS | Vertical & Horizontal

(http://www.tutorial-webdesign.com/posisi-center-dengan-css/)
TWD Editorial (http://www.tutorial-webdesign.com/author/tutwdcom/) URL:http://www.tutorial-
webdesign.com/Zvh2A (http://www.tutorial-webdesign.com/Zvh2A)
January 26th, 2013 Tips & Tricks (http://www.tutorial-webdesign.com/category/tips-tricks/), Web Design
(http://www.tutorial-webdesign.com/category/web-design/) 17 Comments (http://www.tutorial-
webdesign.com/posisi-center-dengan-css/#comments)

www.tutorial-webdesign.com/posisi-center-dengan-css/ 3/17
7/22/2019 Posisi Elemen Di Tengah Dengan CSS | Vertical & Horizontal | Tutorial Web Design

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.

www.tutorial-webdesign.com/posisi-center-dengan-css/ 4/17
7/22/2019 Posisi Elemen Di Tengah Dengan CSS | Vertical & Horizontal | Tutorial Web Design

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 position: fixed;
7 top: 50%;
8 left: 50%;
9 margin-top: -120px;
10 margin-left: -220px;
11 }

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 (http://jsfiddle.net/vLs2E/)
www.tutorial-webdesign.com/posisi-center-dengan-css/ 5/17
7/22/2019 Posisi Elemen Di Tengah Dengan CSS | Vertical & Horizontal | Tutorial Web Design
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 (http://jsfiddle.net/vLs2E/1/)

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 (http://jsfiddle.net/vLs2E/2/)

Download code selengkapnya di Github:Gist Tutweb (https://gist.github.com/4643102)

Sekian tutorial kali ini, semoga bermanfaat.

Salam Web Design Indonesia

Bagikan Ke Sosial Media

www.tutorial-webdesign.com/posisi-center-dengan-css/ 6/17
7/22/2019 Posisi Elemen Di Tengah Dengan CSS | Vertical & Horizontal | Tutorial Web Design

Follow @tut_web 4,037 followers

Tutorial Web Design

Like Page 52K likes

Tags:

Centering CSS (http://www.tutorial-webdesign.com/tag/centering-css/)

CSS (http://www.tutorial-webdesign.com/tag/css/)

CSS Center (http://www.tutorial-webdesign.com/tag/css-center/)

CSS Display Table (http://www.tutorial-webdesign.com/tag/css-display-table/)

CSS Display Table Cell (http://www.tutorial-webdesign.com/tag/css-display-table-cell/)

Positioning (http://www.tutorial-webdesign.com/tag/positioning/)

Sort URL http://www.tutorial-webdesign.com/Zvh2A (http://www.tutorial-webdesign.com/Zvh2A)

Back To Top

Penulis :

TWD Editorial (http://www.tutorial-

webdesign.com/author/tutwdcom/)
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
(http://www.tutorial-webdesign.com/author/tutwdcom/)

http://tutorial-webdesign.com (http://tutorial-webdesign.com)

(http://www.twitter.com/tut_web) (http://www.facebook.com/tutwebdesign)
(https://plus.google.com/u/0/111362047546002612156?rel=author)

Artikel Terkait

www.tutorial-webdesign.com/posisi-center-dengan-css/ 7/17
7/22/2019 Posisi Elemen Di Tengah Dengan CSS | Vertical & Horizontal | Tutorial Web Design

(http://www.tutorial-webdesign.com/ide-menulis-blog-saat-suntuk/)
4 Ide Menulis Blog Saat Suntuk (http://www.tutorial-webdesign.com/ide-menulis-blog-saat-
suntuk/)

(http://www.tutorial-webdesign.com/konsep-website-candi-borobudur-dengan-adobe-xd/)
Konsep Website Candi Borobudur dengan Adobe XD (http://www.tutorial-
webdesign.com/konsep-website-candi-borobudur-dengan-adobe-xd/)

www.tutorial-webdesign.com/posisi-center-dengan-css/ 8/17
7/22/2019 Posisi Elemen Di Tengah Dengan CSS | Vertical & Horizontal | Tutorial Web Design

(http://www.tutorial-webdesign.com/trixy-template-website-versi-mobile-gratis-dengan-
jquery/)
Trixy: Template Website Versi Mobile Gratis dengan jQuery (http://www.tutorial-
webdesign.com/trixy-template-website-versi-mobile-gratis-dengan-jquery/)

Comments
17 thoughts on “Posisi Elemen Di Tengah Dengan CSS | Vertical & Horizontal”

amdhas (http://amdhas.com) says:

January 28, 2013 at 01:38 (http://www.tutorial-webdesign.com/posisi-center-dengan-css/#comment-568)

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.

Reply

TWD Editorial (http://tutorial-webdesign.com) says:

January 28, 2013 at 02:48 (http://www.tutorial-webdesign.com/posisi-center-dengan-css/#comment-569)

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.

Reply

www.tutorial-webdesign.com/posisi-center-dengan-css/ 9/17
7/22/2019 Posisi Elemen Di Tengah Dengan CSS | Vertical & Horizontal | Tutorial Web Design

Suwondo says:
March 26, 2013 at 06:50 (http://www.tutorial-webdesign.com/posisi-center-dengan-css/#comment-904)

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.

Reply

zulfi says:
June 14, 2013 at 16:37 (http://www.tutorial-webdesign.com/posisi-center-dengan-css/#comment-1299)

makasih gan

Reply

Membuat Desain Logo Dengan CSS3 | Tutorial Web Design (http://www.tutorial-webdesign.com/membuat-

desain-logo-dengan-css/) says:
June 22, 2013 at 12:40 (http://www.tutorial-webdesign.com/posisi-center-dengan-css/#comment-1353)
[…] 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 […]

Reply

yussan (http://www.kompetisiindonesia.com) says:

July 23, 2013 at 21:56 (http://www.tutorial-webdesign.com/posisi-center-dengan-css/#comment-1491)

jika saya menggunakan

margin : 50% auto;

apakah kelemahannya

Reply

TWD Editorial (http://tutorial-webdesign.com) says:

July 24, 2013 at 01:15 (http://www.tutorial-webdesign.com/posisi-center-dengan-css/#comment-1492)

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.

Reply

www.tutorial-webdesign.com/posisi-center-dengan-css/ 10/17
7/22/2019 Posisi Elemen Di Tengah Dengan CSS | Vertical & Horizontal | Tutorial Web Design
syafiq says:
November 13, 2013 at 19:49 (http://www.tutorial-webdesign.com/posisi-center-dengan-css/#comment-2640)

gan cara gk usah tebel tebel gmn?

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

Reply

TWD Editorial (http://tutorial-webdesign.com) says:

November 14, 2013 at 11:15 (http://www.tutorial-webdesign.com/posisi-center-dengan-css/#comment-2650)

Edit aja kode CSS nya, hilangin

padding:20px;
background:yellow;
dll nya

Reply

reproduction furniture (http://www.frenchfurnitureindonesia.com) says:

October 20, 2014 at 09:39 (http://www.tutorial-webdesign.com/posisi-center-dengan-css/#comment-10867)

Terimakasih tutorialnya., sangat bermanfaat untuk website kami

Reply

Yogi uliyanto (http://www.triptup.com) says:

November 1, 2014 at 22:40 (http://www.tutorial-webdesign.com/posisi-center-dengan-css/#comment-11365)

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

Reply

akhwan says:
March 26, 2015 at 13:58 (http://www.tutorial-webdesign.com/posisi-center-dengan-css/#comment-14651)

maksudnya bagaimana, om ?

Reply

Jncrp (http://harjunacomsky.com) says:

November 15, 2014 at 09:19 (http://www.tutorial-webdesign.com/posisi-center-dengan-css/#comment-11949)

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

Reply

Anjar (http://2tube.top) says:

October 17, 2016 at 18:32 (http://www.tutorial-webdesign.com/posisi-center-dengan-css/#comment-48273)
www.tutorial-webdesign.com/posisi-center-dengan-css/ 11/17
7/22/2019
Kalau Posisi
agar body berada di Elemen
tengah Di Tengah Dengan
bagaimanakah CSS | Vertical
cara mengatur & Horizontal | Tutorial Web Design
css’nya?

Reply

Muhammad Syifa says:

March 24, 2017 at 17:07 (http://www.tutorial-webdesign.com/posisi-center-dengan-css/#comment-51695)

kalau kata saya sih cara yg seperti itu kurang tepat gan, tapi gimana baiknya lah seorang programmer harus
pinter pinter eksplorasi sendiri, biar jawabanya ketemu sendiri biar PUAS

Reply

fahrul fahrizal says:

March 7, 2018 at 14:20 (http://www.tutorial-webdesign.com/posisi-center-dengan-css/#comment-63911)

Saya boleh bertanya? saya ingin membuat navigasi bar seperti website ini di sebelah pojok kanan ada
bagian search, saya pengguna wordpress, ketika saya menambahkan widget search posisinya terdapat
pada header, gimana ya supaya sejajar dengan navigasi bar seperti website ini? kalo boleh tau

semoga ada jawaban email ya please fahrulfahrizal@gmail.com (mailto:fahrulfahrizal@gmail.com)

Reply

TWD Editorial (http://tutorial-webdesign.com) says:

March 25, 2018 at 21:03 (http://www.tutorial-webdesign.com/posisi-center-dengan-css/#comment-64995)

Kami menggunakan Bootstrap, bisa dibaca pada bagian Navbar Bootstrap

(https://getbootstrap.com/docs/4.0/components/navbar/)

Reply

Leave a Comment
Name (required)

Mail (will not be published) (required)

Website

Comment

www.tutorial-webdesign.com/posisi-center-dengan-css/ 12/17
7/22/2019 Posisi Elemen Di Tengah Dengan CSS | Vertical & Horizontal | Tutorial Web Design

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>

Submit Comment

↑ Back to top

Selamat Datang
Tutorial-webdesign.com (http://www.tutorial-webdesign.com) adalah Website untuk Web
Designer & Web Developer Indonesia, Serta Graphic Designer Indonesia.

Berkontribusi / Menulis Disini?

Kami mengundang anda semua untuk menjadi kontributor di website ini

www.tutorial-webdesign.com/posisi-center-dengan-css/ 13/17
7/22/2019 Posisi Elemen Di Tengah Dengan CSS | Vertical & Horizontal | Tutorial Web Design

Registrasi
(http://www.tutorial- Login Ketentuan Keuntungan
webdesign.com/wp- (http://www.tutorial- (http://www.tutorial- (http://www.tutorial-
login.php? webdesign.com/wp- webdesign.com/menjadi-webdesign.com/keuntung
action=pendaftaran)login.php) penulis) menulis)

Update Seputar Web

Melalui Sosial Media & Email

Tutorial Web Design

Like Page 52K likes Follow @tut_web 4,037 followers

Artikel Gratis!!
Dapatkan artikel web terbaru langsung di inbox kamu

Email Address Subscribe

Populer Minggu Ini

(http://www.tutorial-webdesign.com/posisi-center-dengan-css/)
posted on January 26, 2013
Posisi Elemen Di Tengah Dengan CSS | Vertical & Horizontal (http://www.tutorial-
webdesign.com/posisi-center-dengan-css/)
Dalam tutorial ini kita akan membuat posisi s...

(http://www.tutorial-webdesign.com/membuat-menu-posisi-tetap-responsive/)
posted on December 6, 2012
Membuat Menu Posisi Tetap dan Responsive (http://www.tutorial-webdesign.com/membuat-
menu-posisi-tetap-responsive/)
Tulisan kali ini akan membahas tentang posi...

(http://www.tutorial-webdesign.com/membuat-auto-height-dengan-css/)
posted on June 11, 2013
Membuat Auto Height 100% Dengan CSS (Fullscreen) (http://www.tutorial-
webdesign.com/membuat-auto-height-dengan-css/)
Membuat height 100% sesuai tinggi monitor den...

www.tutorial-webdesign.com/posisi-center-dengan-css/ 14/17
7/22/2019 Posisi Elemen Di Tengah Dengan CSS | Vertical & Horizontal | Tutorial Web Design
(http://www.tutorial-webdesign.com/tutorial-cara-install-xampp-di-linux-ubuntu/)
posted on July 2, 2014
Tutorial Cara Install Xampp di Linux Ubuntu (http://www.tutorial-webdesign.com/tutorial-cara-
install-xampp-di-linux-ubuntu/)
Linux adalah salah satu sistem operasi yang b...

(http://www.tutorial-webdesign.com/10-template-bootstrap-gratis-dan-responsive/)
posted on May 22, 2014
10 Template Bootstrap Gratis Dan Responsive (http://www.tutorial-webdesign.com/10-template-
bootstrap-gratis-dan-responsive/)
Twitter Bootstrap merupakan mobile first fron...

Diskusi Minggu Ini

Sorry. No data so far.

External Resources
Artikel-artikel menarik dari website lain yang membahas Pembuatan Website dan Desain

(http://www.majalahdesain.com/feed/) MajalahDesain.Com

(http://www.majalahdesain.com/)

Kaktus Tren Terbaru Dekorasi Rumah (http://www.majalahdesain.com/kaktus-tren-terbaru-

dekorasi-rumah/)

Bahan Ilustrasi Keren dari Benda Sehari-hari di Sekitar Rumah

(http://www.majalahdesain.com/bahan-ilustrasi-dari-benda-disekitar/)

25 Ilusi Gambar Lipatan Kertas Yang Terlihat Seperti 3D (http://www.majalahdesain.com/ilusi-

gambar-lipatan-kertas-yang-terlihat-seperti-3d/)

Panduan Membuat Desain Icon Untuk Desainer Pemula (http://www.majalahdesain.com/panduan-

membuat-desain-icon-untuk-desainer-pemula/)

10 Contoh Kaligrafi Arab Dibuat Dengan Cahaya Yang Super Keren

(http://www.majalahdesain.com/contoh-kaligrafi-cahaya-keren/)

20 Desain Tas Belanja Keren, Unik, Menarik, dan Menggelikan

(http://www.majalahdesain.com/desain-tas-belanja-keren-unik-menarik-dan-menggelikan/)

Keren! Lukisan Pensil Realistis Ciptaan Seniman Fazo (http://www.majalahdesain.com/lukisan-

pensil-realistis-keren-ciptaan-seniman-fazo/)

5 Gambar Editan Photoshop Keren Yang Menipu Mata (http://www.majalahdesain.com/5-gambar-

editan-photoshop-keren-yang-menipu-mata/)

Menjadi Seorang Desainer Grafis (http://www.majalahdesain.com/menjadi-seorang-desainer-

grafis/)

7 Mitos & Fakta Desain Grafis (http://www.majalahdesain.com/7-mitos-fakta-desain-grafis/)

www.tutorial-webdesign.com/posisi-center-dengan-css/ 15/17
7/22/2019 Posisi Elemen Di Tengah Dengan CSS | Vertical & Horizontal | Tutorial Web Design
(http://www.jurnalweb.com/feed) JurnalWeb.com

(https://www.jurnalweb.com/)

Menghitung Umur Berdasarkan Tanggal Lahir dengan Javascript

(https://www.jurnalweb.com/menghitung-umur-berdasarkan-tanggal-lahir-dengan-javascript/)

Perbedaan Front-End vs Back-end Developer (https://www.jurnalweb.com/perbedaan-front-end-

vs-back-end-developer/)

Cara Testing iOS di Mac dengan Simulator (https://www.jurnalweb.com/cara-testing-ios-di-mac-

dengan-simulator/)

8 Peralatan Teknologi yang Dibutuhkan Seorang Desainer (https://www.jurnalweb.com/peralatan-

teknologi-yang-diperlukan-seorang-desainer/)

Cara Menjalankan Node.js di Server Apache (https://www.jurnalweb.com/cara-menjalankan-node-

js-di-server-apache/)

Tutorial Cara Install MongoDB di Windows + Compass GUI Admin

(https://www.jurnalweb.com/tutorial-cara-install-mongodb-di-windows-compass-gui-admin/)

Laravel 5.7 Cara Mengatasi Error 1071 Specified key was too long; max key length is 767 bytes
(https://www.jurnalweb.com/laravel-5-7-cara-mengatasi-error-1071-specified-key-was-too-long-
max-key-length-is-767-bytes/)

Tutorial Cara Menginstall Laravel 5.7 di XAMPP Windows (https://www.jurnalweb.com/tutorial-

cara-menginstall-laravel-5-7-di-xampp-windows/)

8 Buku PHP Gratis untuk Belajar Pemrograman Web (https://www.jurnalweb.com/buku-php-gratis-

untuk-belajar-pemrograman-web/)

Cara Menginstall Git di Windows (https://www.jurnalweb.com/cara-menginstall-git-di-windows/)

Best For You Resources

Web Design (http://www.tutorial- Credit (http://www.tutorial-
webdesign.com/category/web-design/) webdesign.com/credit/)
Tutorial (http://www.tutorial- Lisensi (http://www.tutorial-
webdesign.com/category/tutorial/) webdesign.com/license/)
Tips & Tricks (http://www.tutorial- Menjadi penulis TWD (http://www.tutorial-
webdesign.com/category/tips-tricks/) webdesign.com/menjadi-penulis/)
Web Development (http://www.tutorial- About (http://www.tutorial-
webdesign.com/category/web-development/) webdesign.com/about/)
Graphic Design (http://www.tutorial- Artikel (http://www.tutorial-
webdesign.com/category/graphic-design/) webdesign.com/articles/)

Author Pages Friends

Register (http://www.tutorial- Ariona (http://www.ariona.net/)
webdesign.com/wp-login.php? JurnalWeb.com (http://www.jurnalweb.com)
www.tutorial-webdesign.com/posisi-center-dengan-css/ 16/17
7/22/2019 action=register) Posisi Elemen Di Tengah Dengan CSSMajalahDesain.com
| Vertical & Horizontal | Tutorial Web Design

Login (http://www.tutorial-webdesign.com/wp- (http://www.majalahdesain.com)

login.php) Psdesain (http://www.psdesain.net)
Ketentuan (http://www.tutorial-
webdesign.com/menjadi-penulis)
Keuntungan Menulis (http://www.tutorial-
webdesign.com/keuntungan-menulis/)
RSS Feed
(http://feeds.feedburner.com/tut_web)

Bagikanlah ilmu anda agar bermanfaat, dan anda akan termotivasi mencari lebih banyak ilmu-ilmu baru
Copyright © 2019 | Design & Develop by Tutorial Web Design (http://www.tutorial-webdesign.com/)

Back to top

www.tutorial-webdesign.com/posisi-center-dengan-css/ 17/17