Πώς να κεντράρετε κάθετα ένα δοχείο στο Bootstrap;

Ο τρόπος του ευέλικτου κουτιού

Η κάθετη ευθυγράμμιση είναι τώρα πολύ απλή με τη χρήση του Flexible box layout. Σήμερα, αυτή η μέθοδος υποστηρίζεται σε ένα ευρύ φάσμα των φυλλομετρητών ιστού εκτός από τον Internet Explorer 8 & 9. Ως εκ τούτου, θα πρέπει να χρησιμοποιήσουμε κάποια hacks/polyfills ή διαφορετικές προσεγγίσεις για τον IE8/9.

Στη συνέχεια θα σας δείξω πώς να το κάνετε αυτό σε μόνο 3 γραμμές κειμένου (ανεξάρτητα από την παλιά σύνταξη flexbox).

Σημείωση: είναι καλύτερα να χρησιμοποιήσετε μια πρόσθετη κλάση αντί να αλλάξετε την .jumbotron για να επιτύχετε την κάθετη στοίχιση. Θα χρησιμοποιούσα για παράδειγμα το όνομα της κλάσης vertical-center.

[Παράδειγμα εδώ][5] (Ένα Καθρέφτης στο jsbin).

<div class="jumbotron vertical-center"> 
  <div class="container">
    ...
  </div>
</div>

.vertical-center {
  min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh; /* These two lines are counted as one :-)       */

  display: flex;
  align-items: center;
}

Σημαντικές σημειώσεις (Εξετάζεται στο demo):

1. Μια ποσοστιαία τιμή των ιδιοτήτων height ή min-height είναι σχετική με το height του γονικού στοιχείου, επομένως θα πρέπει να καθορίσετε ρητά το height του γονέα.

2. Η σύνταξη του προμηθευτή με πρόθεμα / παλιό flexbox παραλείπεται στο αναρτημένο απόσπασμα λόγω συντομίας, αλλά υπάρχει στο online παράδειγμα.

3. Σε ορισμένα από τα παλιά προγράμματα περιήγησης ιστού, όπως ο Firefox 9 (στον οποίο έχω δοκιμάσει), το δοχείο flex - .vertical-center σε αυτή την περίπτωση - δεν θα καταλάβει τον διαθέσιμο χώρο μέσα στο γονέα, επομένως πρέπει να καθορίσουμε την ιδιότητα width όπως: Πλάτος: 100%.

4. Επίσης, σε ορισμένα από τα προγράμματα περιήγησης ιστού, όπως αναφέρθηκε παραπάνω, το στοιχείο flex - .container σε αυτή την περίπτωση - μπορεί να μην εμφανίζεται στο κέντρο οριζόντια. Φαίνεται ότι το εφαρμοζόμενο αριστερό/δεξιό margin του auto δεν έχει καμία επίδραση στο στοιχείο flex.
   Επομένως, πρέπει να το ευθυγραμμίσουμε με το box-pack / justify-content.

Για περισσότερες λεπτομέρειες ή/και την κάθετη στοίχιση των στηλών, μπορείτε να ανατρέξετε στο παρακάτω θέμα:

• https://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3/25517025#25517025

Ο παραδοσιακός τρόπος για παλαιούς φυλλομετρητές ιστού

Αυτή είναι η παλιά απάντηση που έγραψα την εποχή που απάντησα σε αυτή την ερώτηση. Αυτή η μέθοδος έχει συζητηθεί εδώ και υποτίθεται ότι λειτουργεί και στον Internet Explorer 8 και 9. Θα την εξηγήσω εν συντομία:

Στη ροή inline, ένα στοιχείο επιπέδου inline μπορεί να ευθυγραμμιστεί κάθετα στη μέση με τη δήλωση vertical-align: middle. Προδιαγραφές από το W3C:

middle Ευθυγραμμίζει το κατακόρυφο μέσο του πλαισίου με τη βασική γραμμή του γονικού πλαισίου συν το μισό του ύψους x του γονέα.

Στις περιπτώσεις που ο γονέας - το στοιχείο .vertical-center στην προκειμένη περίπτωση - έχει ρητό height, κατά πάσα πιθανότητα αν μπορούσαμε να έχουμε ένα στοιχείο-παιδί που να έχει ακριβώς το ίδιο height του γονέα, θα μπορούσαμε να μετακινήσουμε τη βασική γραμμή του γονέα στο μέσο του πλήρους ύψους παιδιού και εκπληκτικά να κάνουμε το επιθυμητό παιδί μας μέσα στη ροή - το .container - να ευθυγραμμιστεί στο κέντρο κάθετα.

Όλα μαζί

Τούτου λεχθέντος, θα μπορούσαμε να δημιουργήσουμε ένα στοιχείο πλήρους ύψους μέσα στο .vertical-center με ψευδοστοιχεία ::before ή ::after και επίσης να αλλάξουμε τον προεπιλεγμένο τύπο display αυτού και του άλλου παιδιού, του .container σε inline-block.

Στη συνέχεια, χρησιμοποιήστε vertical-align: middle; για να ευθυγραμμίσετε τα inline στοιχεία κάθετα.

Ορίστε:

<div class="jumbotron vertical-center">
  <div class="container">
    ...
  </div>
</div>

.vertical-center {
  height:100%;
  width:100%;

  text-align: center;  /* align the inline(-block) elements horizontally */
  font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

.vertical-center:before {    /* create a full-height inline block pseudo=element */
  content: " ";
  display: inline-block;
  vertical-align: middle;    /* vertical alignment of the inline element */
  height: 100%;
}

.vertical-center > .container {
  max-width: 100%;

  display: inline-block;
  vertical-align: middle;  /* vertical alignment of the inline element */
                           /* reset the font property */
  font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

WORKING DEMO.

Επίσης, για να αποφύγετε απροσδόκητα προβλήματα σε πολύ μικρές οθόνες, μπορείτε να επαναφέρετε το ύψος του ψευδο-στοιχείου σε auto ή 0 ή να αλλάξετε τον τύπο display σε none αν χρειαστεί:

@media (max-width: 768px) {
  .vertical-center:before {
    height: auto;
    /* Or */
    display: none;
  }
}

ΕΝΗΜΕΡΩΜΈΝΟ DEMO

Και κάτι ακόμα:

και προσθέστε μια υψηλότερη τιμή z-index (για διασφάλιση) για να τα κρατάτε πάντα στην κορυφή των άλλων.

προσθέστε το Bootstrap.css και στη συνέχεια προσθέστε αυτό στο css σας

Η προτιμώμενη τεχνική μου :

body {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}

.jumbotron {
   display: table-cell;
   vertical-align: middle;
}

Demo