Menggunakan margin: auto untuk meratakan div secara vertikal

Jadi saya tahu kita bisa memusatkan div secara horizontal jika kita menggunakannya margin:0 auto;. Sebaiknyamargin:auto auto; bekerja menurut saya seharusnya bekerja? Memusatkan juga secara vertikal?

Mengapa tidak vertical-align:middle;berhasil?

.black {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,.5);
}
.message {
    background:yellow;
    width:200px;
    margin:auto auto;
    padding:10px;
}

<div class="black">
    <div class="message">
        This is a popup message.
    </div>
</div>

JSFiddle

Perbarui Agustus 2020

Meskipun di bawah ini masih layak dibaca untuk info berguna, kami telah memiliki Flexbox untuk beberapa waktu sekarang, jadi gunakan saja, sesuai jawaban ini .

Anda tidak dapat menggunakan:

vertical-align:middlekarena itu tidak berlaku untuk elemen level blok

margin-top:autodan margin-bottom:autokarena nilai yang digunakan akan dihitung sebagai nol

margin-top:-50%karena nilai margin berbasis persentase dihitung relatif terhadap lebar blok penampung

Sebenarnya, sifat dari aliran dokumen dan algoritma penghitungan ketinggian elemen membuat tidak mungkin menggunakan margin untuk memusatkan elemen secara vertikal di dalam induknya. Setiap kali nilai margin vertikal diubah, itu akan memicu penghitungan ulang tinggi elemen induk (aliran ulang), yang pada gilirannya akan memicu pusat kembali elemen asli ... menjadikannya pengulangan tak terbatas.

Kamu bisa memakai:

Beberapa solusi seperti ini yang sesuai untuk skenario Anda; ketiga elemen tersebut harus bersarang seperti ini:

.container {
    display: table;
    height: 100%;
    position: absolute;
    overflow: hidden;
    width: 100%;
}
.helper {
    #position: absolute;
    #top: 50%;
    display: table-cell;
    vertical-align: middle;
}
.content {
    #position: relative;
    #top: -50%;
    margin: 0 auto;
    width: 200px;
    border: 1px solid orange;
}

<div class="container">
    <div class="helper">
        <div class="content">
            <p>stuff</p>
        </div>
    </div>
</div

JSFiddle berfungsi dengan baik menurut .

Karena pertanyaan ini ditanyakan pada tahun 2012 dan kami telah berkembang pesat dengan dukungan browser untuk flexboxes, saya merasa jawaban ini wajib.

Jika tampilan penampung induk Anda adalah flex, maka yes , margin: auto auto(juga dikenal sebagai margin: auto) akan bekerja untuk memusatkannya baik secara horizontal maupun vertikal, terlepas dari apakah itu elemen inlineatau block.

#parent {
    width: 50vw;
    height: 50vh;
    background-color: gray;
    display: flex;
}
#child {
    margin: auto auto;
}

<div id="parent">
    <div id="child">hello world</div>
</div>

Perhatikan bahwa lebar / tinggi tidak harus ditentukan secara mutlak, seperti dalam contoh ini jfiddle yang menggunakan ukuran relatif terhadap viewport.

Meskipun dukungan browser untuk flexboxes selalu tinggi pada saat posting, banyak browser masih tidak mendukungnya atau membutuhkan prefiks vendor. Lihat http://caniuse.com/flexbox untuk informasi dukungan browser terbaru.

Memperbarui

Karena jawaban ini mendapat sedikit perhatian, saya juga ingin menunjukkan bahwa Anda tidak perlu menentukan marginsama sekali jika Anda menggunakan display: flexdan ingin memusatkan semua elemen dalam wadah:

#parent {
    width: 50vw;
    height: 50vh;
    background-color: gray;
    display: flex;
    align-items: center; /* horizontal */
    justify-content: center; /* vertical */
}

<div id="parent">
    <div>hello world</div>
</div>

Inilah solusi terbaik yang saya temukan: http://jsfiddle.net/yWnZ2/446/ Bekerja di Chrome, Firefox, Safari, IE8-11 & Edge.

Jika Anda telah dideklarasikan height( height: 1em, height: 50%, dll) atau itu merupakan elemen mana browser tahu ketinggian ( img, svg, atau canvasmisalnya), maka semua yang Anda butuhkan untuk centering vertikal adalah ini:

.message {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    margin: auto;
}

Anda biasanya ingin menentukan satu widthatau max-widthlebih konten tidak meregangkan seluruh panjang layar / wadah.

Jika Anda menggunakan ini untuk modal yang Anda inginkan selalu berpusat di area pandang yang tumpang tindih dengan konten lain, gunakan position: fixed;untuk kedua elemen, bukan position: absolute. http://jsfiddle.net/yWnZ2/445/

Berikut artikel yang lebih lengkap: http://codepen.io/shshaw/pen/gEiDt

Sunting: ini tahun 2020, saya akan menggunakan kotak fleksibel sebagai gantinya.

Jawaban asli:

Html

<body>
  <div class="centered">
  </div>
</body>

CSS

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Saya tahu pertanyaannya berasal dari tahun 2012, tetapi saya menemukan cara termudah yang pernah ada, dan saya ingin berbagi.

HTML:

<div id="parent">
     <div id="child">Content here</div>
</div>

dan CSS:

#parent{
     height: 100%;
     display: table;
}    
#child {
     display: table-cell;
     vertical-align: middle; 
}

Jika Anda mengetahui tinggi div yang ingin dipusatkan , Anda dapat memposisikannya secara absolut di dalam induknya lalu menyetel topnilainya ke 50%. Itu akan menempatkan bagian atas div anak 50% dari jalan ke bawah induknya, yaitu terlalu rendah. Tarik kembali dengan mengaturnyamargin-top setengah tingginya. Jadi sekarang Anda memiliki titik tengah vertikal div turunan yang berada di titik tengah vertikal induk - berpusat secara vertikal!

Contoh:

.black {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,.5);
}
.message {
    background:yellow;
    width:200px;
    margin:auto auto;
    padding:10px;
    position: absolute;
    top: 50%;
    margin-top: -25px;
    height: 50px;
}

<div class="black">
    <div class="message">
        This is a popup message.
    </div>
</div>

http://jsfiddle.net/yWnZ2/2/

Kedua solusi tersebut hanya membutuhkan dua elemen bersarang.
Pertama - Pemosisian relatif dan absolut jika kontennya statis (tengah manual).

.black {
    position:relative;
    min-height:500px;
    background:rgba(0,0,0,.5);

}
.message {
    position:absolute;
    margin: 0 auto;
    width: 180px;
    top: 45%; bottom:45%;  left: 0%; right: 0%;
}

https://jsfiddle.net/GlupiJas/5mv3j171/

atau untuk desain yang lancar - untuk penggunaan pusat konten yang tepat seperti contoh di bawah ini:

.message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

https://jsfiddle.net/GlupiJas/w3jnjuv0/

Anda perlu menyetel 'min-height' jika konten melebihi 50% dari tinggi jendela. Anda juga dapat memanipulasi ketinggian ini dengan kueri media untuk perangkat seluler dan tablet. Namun hanya jika Anda bermain dengan desain responsif.

Saya kira Anda bisa melangkah lebih jauh dan menggunakan skrip JavaScript / JQuery sederhana untuk memanipulasi min-height atau fixed height jika ada kebutuhan karena alasan tertentu.

Kedua - jika konten dapat mengalir, Anda juga dapat menggunakan properti css tabel dan sel tabel dengan perataan vertikal dan rata tengah teks:

/*in a wrapper*/  
display:table;   

dan

/*in the element inside the wrapper*/
display:table-cell;
vertical-align: middle;
text-align: center;

Berfungsi dan menskalakan dengan sempurna, sering digunakan sebagai solusi desain web responsif dengan tata letak kisi dan kueri media yang memanipulasi lebar objek.

.black {
    display:table;
    height:500px;
    width:100%;
    background:rgba(0,0,0,.5);

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

https://jsfiddle.net/GlupiJas/4daf2v36/

Saya lebih suka solusi tabel untuk pemusatan konten yang tepat, tetapi dalam beberapa kasus, pemosisian relatif absolut akan melakukan pekerjaan yang lebih baik terutama jika kita tidak ingin mempertahankan proporsi yang tepat dari penyelarasan konten.

Tidak ada satu cara mudah untuk memusatkan div secara vertikal yang akan melakukan trik dalam setiap situasi.

Namun, ada banyak cara untuk melakukannya tergantung situasinya.

Berikut ini beberapa di antaranya:

• Setel padding atas dan bawah dari elemen induk misalnya padding: 20px 0px 20px 0px
• Gunakan tabel, sel tabel memusatkan isinya secara vertikal
• Tetapkan posisi elemen induk relatif dan div yang ingin Anda pusatkan secara vertikal ke absolut dan beri gaya sebagai top: 50px; bawah: 50px; sebagai contoh

Anda juga dapat menggunakan Google untuk "pemusatan vertikal css"

tinggi variabel, margin atas dan bawah otomatis

.black {background:rgba(0,0,0,.5);
width: 300px;
height: 100px;
display: -webkit-flex; /* Safari */
display: flex;}
.message{
background:tomato;
margin:auto;
padding:5%;
width:auto;
}

<div class="black">
<div class="message">
    This is a popup message.
</div>

tinggi variabel, margin atas dan bawah otomatis

Menggunakan Flexbox:

HTML:

<div class="container">
  <img src="http://lorempixel.com/400/200" />
</div>

CSS:

.container {
  height: 500px;
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center */
}

Lihat hasil

.black {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,.5);
}
.message {
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background:yellow;
    width:200px;
    padding:10px;
}

 - 


----------


<div class="black">
<div class="message">
    This is a popup message.
</div>