Wie man vertikal zentrieren einer div-container

Ihrer aktuellen Struktur, Sie haben zwei Lösungen, damit es funktioniert:

1) CSS

Wickeln Sie die Elemente mit einem div und verwenden Sie diesen trick:

Sehen diese arbeiten Geige Beispiel! ^{(Wenn Sie verschieben Sie den Rahmen nach oben und nach unten, sehen Sie, dass das Ziel bleibt vertikal zentriert werden.)}

#childWrap {                  //the new element, the mentioned wrapper
  display: table;
  width: 100%;
  height: 100%;
}
#child {                      //your element that needs to be restyled
  display: table-cell;
  width: 100%;
  height: 100%;
  vertical-align: middle;
}
#popup_interstitial_table {   //the element vertically aligned
  width: 50%;
  margin: -48px auto 0 auto;
}

Was hier geleistet wird, ist der wrapper-element für die Anzeige als Tabelle, besetzen die gesamte Breite und Höhe des übergeordneten Elements (#parent).

Dann, können wir die #child für die Anzeige als Tabelle-Zelle und setzen Sie den Inhalt auf die vertikale ausrichten an der Mitte.

Nun der trick, da die #parent enthält auch ein weiteres element, das Sie brauchen, um zu bleiben, aber seine Höhe entfernt vom "Zentrum" Berechnungen für die #popup_interstitial_table wir ziehen das #popup_interstitial_table mit einem margin-top:-60px fix seine position. Die negative Marge ist die Höhe, die #popup_interstitial_pro_head_text belegt.

Wichtiger Hinweis:

Da haben Sie diese Struktur, um zu passieren, um den browser-fix, Ihre #popup_interstitial_pro_head_text braucht, um zu arbeiten mit einem einzigen Gerät habe ich gewählt px für das Beispiel.

Sie hatte eine Mischung von % und em auf mehreren Erklärungen!

On a side note:

Vertical-align: center;

Sie verwenden:

vertical-align: middle;

Sehen dieser link für weitere Informationen!

2) JQUERY

Mit jQuery, die Sie sammeln, können Sie den Raum besetzt durch die #popup_interstitial_table und berechnen die notwendigen Links und oben fix-Werte zu halten es vertikal zentriert:

Sehen diese arbeiten Geige Beispiel! ^{(Wenn Sie verschieben Sie den Rahmen nach oben und nach unten, sehen Sie, dass das Ziel bleibt vertikal zentriert werden.)}

JQUERY

function center() {
  var $target = $('#popup_interstitial_table'),
      $header = $('#popup_interstitial_pro_head_text'),
      fixTop  = ($target.outerHeight(true)/2)-($header.outerHeight(true)/2),
      fixLeft = $target.outerWidth(true)/2;

  $target.css({
    "margin-top": "-" + fixTop + "px",
    "margin-left" : "-" + fixLeft + "px"
  });
}

$(document).ready(function() {
  center();
});

CSS

Um zu verhindern, dass massive Skript-Berechnungen, die CSS bekommen sollte behoben dieser:

#parent {
  position: relative;
  height: 100%;        //this was added
}
#child {
  padding: 0% 0;
  height: 100%;        //this was added
}
#popup_interstitial_table {
  width: 50%;
  margin: 0 auto 0 auto;
  background-color:#E7E7E7;
  padding: 1em 2.2em;
  font: 0.85em "Trebuchet MS", Arial, Helvetica, sans-serif;
  position: absolute;  //this was added
  top: 50%;            //this was added
  left: 50%;           //this was added
}

So, eine Wiederholung, die ohne änderung Ihrer aktuellen Struktur, das sind die beiden Lösungen, die ich denken konnte, zu zentrieren Ihr element!

Ich bin mir nicht bewusst, eine gute Möglichkeit, um das Zentrum ein element vertikal ohne mit Tabelle-Zellen. In diesem Fall ist es Recht einfach, aber Sie gehen zurück auf Tabellen basierende Layouts, die ich denke, Sie versuchen zu vermeiden.

Frage beantworten: Wie wichtig ist es für das element vertikal zentriert?

Andere Möglichkeit ist, javascript zu verwenden, um die Ränder am render-Zeit.