Jak wyśrodkować zawartość w pionie ze zmienną wysokością w div?

Wydaje się to być najlepszym rozwiązaniem, jakie znalazłem na ten problem, o ile twoja przeglądarka obsługuje ::before pseudo element: CSS-Tricks: Centering in the Unknown .

Nie wymaga żadnych dodatkowych znaczników i wydaje się działać bardzo dobrze. Nie mogłem użyć metody display: table, ponieważ elementy table nie są zgodne z właściwością max-height.

.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>

To jest coś, co musiałem zrobić wiele razy, a spójne rozwiązanie nadal wymaga dodania trochę znaczników niemantycznych i niektórych hacków specyficznych dla przeglądarki. Kiedy otrzymamy wsparcie przeglądarki dla css 3 dostaniesz swoje pionowe centrowanie bez grzeszenia.

Dla lepszego wyjaśnienia techniki można zajrzeć artykuł, który zaadaptowałem z, ale zasadniczo polega on na dodaniu dodatkowego elementu i zastosowaniu różnych stylów w IE i przeglądarkach obsługujących position:table\table-cell na nie-tabelce żywioły.

<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>

Istnieje wiele sposobów (hacków) stosowania stylów w określonych zestawach przeglądarek. Użyłem komentarzy warunkowych, ale spójrz na artykuł połączony powyżej, aby zobaczyć dwie inne techniki.

uwaga: istnieją proste sposoby na wyśrodkowanie pionowe, jeśli znasz pewne wysokości z góry, jeśli próbujesz wyśrodkować pojedynczy wiersz tekstu lub w kilku innych przypadkach. Jeśli masz więcej szczegółów to wrzuć je, ponieważ może istnieć metoda, która nie wymaga hacków przeglądarki lub znaczniki niemantyczne.

Aktualizacja: zaczynamy uzyskiwać lepszą obsługę przeglądarki dla CSS3, wprowadzając zarówno flex-box, jak i transforms jako alternatywne metody centrowania pionowego (między innymi efekty). Zobacz to inne pytanie , aby uzyskać więcej informacji na temat nowoczesnych metod, ale pamiętaj, że obsługa przeglądarki jest nadal szkicowa dla CSS3.

Możesz użyć wyświetlacza flex, takiego jak poniższy kod:

.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>

Używając selektora potomnego, wziąłem niesamowitą odpowiedź Fadiego powyżej i zredukowałem ją do jednej reguły CSS, którą mogę zastosować. Teraz wystarczy dodać contentCentered nazwę klasy do elementów, które chcę wyśrodkować:

.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>

Rozwidlony kod: http://codepen.io/dougli/pen/Eeysg

Najlepszy wynik jak na razie dla mnie:

Div do wyśrodkowania:

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

Możesz użyć margin auto. Z flexem div wydaje się być również wyśrodkowany pionowo.

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>

Dla mnie najlepszym sposobem na to jest:

.container{
  position: relative;
}

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

Zaletą jest to, że nie trzeba wyrażać wysokości

To jest moje niesamowite rozwiązanie dla div z dynamiczną (procentową) wysokością.

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>  

Spróbuj sam.