Bagaimana cara memusatkan konten secara vertikal dengan tinggi variabel dalam div?

Apa cara terbaik untuk memusatkan konten div secara vertikal saat ketinggian konten bervariasi. Dalam kasus khusus saya, ketinggian div wadah tetap, tetapi akan lebih bagus jika ada solusi yang akan bekerja dalam kasus-kasus di mana wadah memiliki ketinggian variabel juga. Juga, saya akan menyukai solusi tanpa, atau menggunakan sangat sedikit peretasan CSS dan / atau markup non-semantik.

Cukup tambahkan

position: relative;
top: 50%;
transform: translateY(-50%);

ke div batin.

Apa yang dilakukannya adalah memindahkan batas atas div dalam ke setengah ketinggian div luar ( top: 50%;) dan kemudian div dalam naik setengah tingginya ( transform: translateY(-50%)). Ini akan bekerja dengan position: absoluteatau relative.

Perlu diingat bahwa transformdan translatememiliki awalan vendor yang tidak termasuk untuk kesederhanaan.

Codepen: http://codepen.io/anon/pen/ZYprdb

Ini tampaknya menjadi solusi terbaik yang saya temukan untuk masalah ini, selama browser Anda mendukung ::beforeelemen pseudo: CSS-Trik: Pemusatan di Unknown .

Tidak memerlukan markup tambahan dan tampaknya berfungsi dengan sangat baik. Saya tidak bisa menggunakan display: tablemetode ini karena tableelemen tidak mematuhi max-heightproperti.

.block {
  height: 300px;
  text-align: center;
  background: #c0c0c0;
  border: #a0a0a0 solid 1px;
  margin: 20px;
}

.block::before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */

  /* For visualization 
  background: #808080; width: 5px;
  */
}

.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
  padding: 10px 15px;
  border: #a0a0a0 solid 1px;
  background: #f5f5f5;
}

<div class="block">
    <div class="centered">
        <h1>Some text</h1>
        <p>But he stole up to us again, and suddenly clapping his hand on my
           shoulder, said&mdash;"Did ye see anything looking like men going
           towards that ship a while ago?"</p>
    </div>
</div>

Ini adalah sesuatu yang perlu saya lakukan berkali-kali dan solusi yang konsisten masih mengharuskan Anda menambahkan markup non-semantik dan beberapa peretas khusus peramban. Ketika kami mendapatkan dukungan browser untuk css 3, Anda akan mendapatkan pemusatan vertikal tanpa dosa.

Untuk penjelasan teknik yang lebih baik, Anda dapat melihat artikel yang saya adaptasi , tetapi pada dasarnya melibatkan penambahan elemen tambahan dan menerapkan gaya yang berbeda di IE dan browser yang mendukung position:table\table-cellelemen non-tabel.

<div class="valign-outer">
    <div class="valign-middle">
        <div class="valign-inner">
            Excuse me. What did you sleep in your clothes again last night. Really. You're gonna be in the car with her. Hey, not too early I sleep in on Saturday. Oh, McFly, your shoe's untied. Don't be so gullible, McFly. You got the place fixed up nice, McFly. I have you're car towed all the way to your house and all you've got for me is light beer. What are you looking at, butthead. Say hi to your mom for me.
        </div>
    </div>
</div>

<style>
    /* Non-structural styling */
    .valign-outer { height: 400px; border: 1px solid red; }
    .valign-inner { border: 1px solid blue; }
</style>

<!--[if lte IE 7]>
<style>
    /* For IE7 and earlier */
    .valign-outer { position: relative; overflow: hidden; }
    .valign-middle { position: absolute; top: 50%; }
    .valign-inner { position: relative; top: -50% }
</style>
<![endif]-->
<!--[if gt IE 7]> -->
<style>
    /* For other browsers */
    .valign-outer { position: static; display: table; overflow: hidden; }
    .valign-middle { position: static; display: table-cell; vertical-align: middle; width: 100%; }
</style>

Ada banyak cara (retasan) untuk menerapkan gaya pada set browser tertentu. Saya menggunakan komentar kondisional tetapi melihat artikel yang terhubung di atas untuk melihat dua teknik lainnya.

Catatan: Ada cara sederhana untuk mendapatkan pemusatan vertikal jika Anda mengetahui ketinggian sebelumnya, jika Anda mencoba memusatkan satu baris teks, atau dalam beberapa kasus lainnya. Jika Anda memiliki perincian lebih lanjut, masukkan saja karena mungkin ada metode yang tidak memerlukan peramban peramban atau markup non-semantik.

Pembaruan: Kami mulai mendapatkan dukungan browser yang lebih baik untuk CSS3, menjadikan flex-box dan transformasi sebagai metode alternatif untuk mendapatkan pemusatan vertikal (di antara efek lainnya). Lihat pertanyaan lain ini untuk informasi lebih lanjut tentang metode modern, tetapi perlu diingat bahwa dukungan browser masih samar untuk CSS3.

Menggunakan pemilih anak, saya telah mengambil jawaban Fadi yang luar biasa di atas dan mengubahnya menjadi hanya satu aturan CSS yang dapat saya terapkan. Sekarang yang harus saya lakukan adalah menambahkan contentCenterednama kelas ke elemen yang saya ingin pusatkan:

.contentCentered {
  text-align: center;
}

.contentCentered::before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -.25em; /* Adjusts for spacing */
}

.contentCentered > * {
  display: inline-block;
  vertical-align: middle;
}

<div class="contentCentered">
  <div>
    <h1>Some text</h1>
    <p>But he stole up to us again, and suddenly clapping his hand on my
      shoulder, said&mdash;"Did ye see anything looking like men going
      towards that ship a while ago?"</p>
  </div>
</div>

Forked CodePen: http://codepen.io/dougli/pen/Eeysg

Hasil terbaik untuk saya sejauh ini:

div untuk dipusatkan:

position: absolute;
top: 50%;
transform: translateY(-50%);
margin: 0 auto;
right: 0;
left: 0;

Anda dapat menggunakan margin otomatis. Dengan flex, div juga tampaknya terpusat secara vertikal.

body,
html {
  height: 100%;
  margin: 0;
}
.site {
  height: 100%;
  display: flex;
}
.site .box {
  background: #0ff;
  max-width: 20vw;
  margin: auto;
}

<div class="site">
  <div class="box">
    <h1>blabla</h1>
    <p>blabla</p>
    <p>blablabla</p>
    <p>lbibdfvkdlvfdks</p>
  </div>
</div>

Bagi saya cara terbaik untuk melakukan ini adalah:

.container{
  position: relative;
}

.element{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Keuntungannya adalah tidak harus membuat ketinggian eksplisit

Ini adalah solusi luar biasa saya untuk divyang dinamis (persentase) tinggi.

CSS

.vertical_placer{
  background:red;
  position:absolute; 
  height:43%; 
  width:100%;
  display: table;
}

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

.inner_placer svg{
  position:relative;
  color:#fff;
  background:blue;
  width:30%;
  min-height:20px;
  max-height:60px;
  height:20%;
}

HTML

<div class="footer">
    <div class="vertical_placer">
        <div class="inner_placer">
            <svg> some Text here</svg>
        </div>
    </div>
</div>  

Coba ini sendiri.

Anda dapat menggunakan tampilan fleksibel seperti kode di bawah ini:

.example{
  background-color:red;
  height:90px;
  width:90px;
  display:flex;
  align-items:center; /*for vertically center*/
  justify-content:center; /*for horizontally center*/
}

<div class="example">
    <h6>Some text</h6>
</div>