tinggi garis sebagai persentase tidak berfungsi

Saya mengalami masalah dengan tinggi garis yang tidak bisa saya pahami.

Kode berikut akan memusatkan gambar di dalam div:

CSS

.bar {
    height: 800px;
    width: 100%;
    line-height:800px;
    background-color: #000;
    text-align: center; 
}

.bar img {
    vertical-align: middle;   
}

HTML

<div class="bar">
    <img src="http://27.media.tumblr.com/yHWA4oxH870ulxnoH7CkOSDR_500.jpg" alt="Foo Image" />
</div>

Namun, jika saya mengubah tinggi garis menjadi 100%, maka tinggi garis tidak berpengaruh (atau setidaknya tidak menjadi 100% div).

Contoh jsfiddle

Adakah yang tahu apa yang saya lakukan salah?

line-height: 100%berarti 100% ukuran font untuk elemen itu, bukan 100% tingginya. Bahkan, garis tinggi selalu relatif terhadap ukuran font, tidak tinggi, kecuali jika nilainya menggunakan satuan panjang mutlak ( px, pt, dll).

Saya tahu pertanyaan ini sudah lama, tetapi saya menemukan solusi yang sempurna bagi saya.

Saya menambahkan css ini ke div yang ingin saya pusatkan:

div:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

Ini bekerja setiap saat dan bersih.

Sunting: Hanya demi penyelesaian, saya menggunakan scss dan saya memiliki mixin praktis yang saya sertakan pada setiap orang tua yang mengarahkan anak-anak yang ingin saya buat secara vertikal di tengah:

@mixin vertical-align($align: middle) {
  &:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: $align;
    // you can add font-size 0 here and restore in the children to prevent
    // the inline-block white-space to mess the width of your elements
    font-size: 0;
  }
  & > * {
    vertical-align: $align;
    // although you need to know the font-size, because "inherit" is 0
    font-size: 14px;
  }
}

Penjelasan lengkap: div:beforeakan menambahkan elemen di dalam div, tetapi sebelum salah satu anaknya. Saat menggunakan :beforeatau :afterkita harus menggunakan content:deklarasi jika tidak, tidak akan terjadi apa-apa, tetapi untuk tujuan kita, konten bisa kosong. Kemudian kita memberi tahu elemen setinggi induknya, selama tinggi induknya ditentukan dan elemen ini setidaknya sebaris-blok. vertical-alignmendefinisikan posisi vertikal terkait diri dengan orang tua, berlawanan dengan text-alignyang bekerja secara berbeda.

The @mixindeklarasi untuk pengguna merendahkannya dan itu akan digunakan seperti ini:

div {
    @include vertical-align(middle)
}

Saat Anda menggunakan persentase sebagai tinggi baris, ini tidak didasarkan pada penampung div, melainkan berdasarkan ukuran font.

line-height: 100% akan menjadi cara mudah untuk memusatkan elemen secara vertikal, jika dihitung dalam kaitannya dengan penampung, tetapi itu akan terlalu mudah, sehingga tidak berhasil.

Jadi sebaliknya, ini hanyalah cara lain untuk mengatakan ketinggian baris: 1em (kan?)

Cara lain untuk memusatkan elemen secara vertikal adalah:

.container {
     position:relative;
}
.center {
     position:absolute;
     top:0; left:0; bottom:0; right:0;
     margin: auto;
     /* for horiz left-align, try "margin: auto auto auto 0" */
}

mungkin tidak cantik, tapi berhasil, dan semantiknya;

<div class="bar" style="display: table; text-align: center;">
    <img style="display: table-cell; vertical-align: middle;" src="http://27.media.tumblr.com/yHWA4oxH870ulxnoH7CkOSDR_500.jpg" alt="Foo Image" />
</div>

display: table-cell memberikan elemen kemampuan tabel unik untuk menyelaraskan vertikal (setidaknya menurut saya unik)

Ini adalah jawaban yang sangat terlambat, namun di browser modern, dengan asumsi bahwa elemen induk juga 100% dari tinggi layar, Anda dapat menggunakan vhunit viewport. BIOLA

line-height: 100vh;

Dukungan browser

Solusi ini berfungsi di IE9 dan di atasnya. Pertama kita atur posisi atas anak menjadi 50% (tengah orang tua). Kemudian gunakan translateaturan, geser anak ke atas setengah dari tinggi sebenarnya. Manfaat utamanya adalah kita tidak perlu menentukan tinggi badan anak, ini dihitung oleh browser secara dinamis. JSFiddle

.bar {
    height: 500px;
    text-align: center;
    background: green;
}
.bar img {
    position: relative;
    top: 50%;
    transform: translate(0, -50%);
}

Pendekatan yang lebih modern adalah menggunakan flexbox untuk ini, lebih sederhana dan lebih bersih. Namun, flexbox adalah paradigma yang sama sekali berbeda dari apa inline-block, floatatau positiondigunakan untuk menjadi.

Untuk menyelaraskan item di dalam .parentAnda lakukan:

.parent {
  display: flex;
  align-items: center;
}

Itu saja. Anak dari flexorang tua secara otomatis diubah menjadi item anak fleksibel.

Anda harus membaca lebih lanjut tentang flexbox, tempat yang baik untuk memulai adalah lembar contekan ini: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Anda dapat mengatur tinggi garis berdasarkan tinggi elemen itu. Jika tinggi elemen 200px berarti Anda perlu mengatur tinggi baris ke 200px untuk memusatkan teks.

span {
  height: 200px;
  width: 200px; 
  border: 1px solid black;
  line-height: 200px; 
  display: block;
}

<span>Im vertically center</span>

Ini adalah solusi modern di mana Anda perlu menyetel CSS berikut di div wadah atau div luar.

.outer-div {
  display: flex;
  justify-content: center;
  align-items: center; 
}

Solusi lain berikut dapat diterapkan ke elemen yang ingin Anda buat menjadi tengah secara vertikal. Perhatikan bahwa div luar atau wadah harus

.inner-div {
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}

Perhatikan bahwa posisi div luar atau wadah harus relatif.