Comment centrer l’alignement vertical du conteneur dans le bootstrap

Je cherche un moyen de centrer verticalement le div du container dans le jumbotron et de le placer au milieu de la page.

Le .jumbotron doit être adapté à toute la hauteur et à la largeur de l’écran. J’ai donc utilisé ce CSS.

 .jumbotron{ heght:100%; width:100%; } 

Le div .container a une largeur de 1025px et devrait être au milieu de la page (verticalement au centre).

 .container{ width:1025px; } .jumbotron .container { max-width: 100%; } 

Mon HTML est comme

 

The easiest and powerful way

  • Redirect
    Visitors where they converts more.

  • Track
    Views, Clicks and Conversions.

  • Check
    Constantly the status of your links.

  • Collaborate
    With Customers, Partners and Co-Workers.

  • GET STARTED
    FREE VERSION AVAILABLE!

Je veux donc que cette page ait le jumbotron adapté à la hauteur et à la largeur de l’écran avec le conteneur verticalement centré sur le jumbotron. Comment puis-je y parvenir?

La manière de boîte flexible

L’alignement vertical est désormais très simple grâce à l’utilisation de l’ agencement de boîtes flexibles . Aujourd’hui, cette méthode est prise en charge dans une large gamme de navigateurs Web, à l’exception d’Internet Explorer 8 et 9. Par conséquent, nous aurions besoin d’utiliser des hacks / polyfills ou des approches différentes pour IE8 / 9.

Dans ce qui suit, je vais vous montrer comment faire cela en seulement 3 lignes de texte (quelle que soit l’ancienne syntaxe Flexbox) .

Remarque: il est préférable d’utiliser une classe supplémentaire au lieu de modifier .jumbotron pour obtenir l’alignement vertical. J’utiliserais le nom de classe de vertical-center par exemple.

Exemple ici (Un miroir sur jsbin) .

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

Notes importantes (considérées dans la démo) :

  1. Les valeurs en pourcentage des propriétés height ou min-height sont relatives à la height de l’élément parent. Par conséquent, vous devez spécifier explicitement la height du parent.

  2. La syntaxe Flexix préfixée / ancienne du fournisseur a été omise dans le fragment publié en raison de sa concision, mais elle existe dans l’exemple en ligne.

  3. Dans certains anciens navigateurs Web tels que Firefox 9 (dans lequel j’ai testé) , le conteneur flexible – .vertical-center dans ce cas – ne prendra pas l’espace disponible dans le parent, nous devons donc spécifier la propriété width like: width: 100% .

  4. Dans certains navigateurs Web, comme indiqué ci-dessus, l’élément flexible – .container dans ce cas – peut ne pas apparaître au centre horizontalement. Il semble que la margin gauche / droite appliquée de l’ auto n’a aucun effet sur l’élément flexible.
    Par conséquent, nous devons l’aligner en box-pack / justify-content de la box-pack / justify-content .

Pour plus de détails et / ou l’alignement vertical des colonnes, vous pouvez vous référer au sujet ci-dessous:

  • alignement vertical avec Bootstrap 3

La méthode traditionnelle pour les navigateurs Web hérités

C’est la vieille réponse que j’ai écrite à l’époque où j’ai répondu à cette question. Cette méthode a été discutée ici et elle est censée fonctionner dans Internet Explorer 8 et 9 également. Je vais l’expliquer en bref:

Dans le stream en ligne, un élément de niveau en ligne peut être aligné verticalement au milieu par vertical-align: middle déclaration vertical-align: middle . Spec du W3C :

milieu
Alignez le point médian vertical de la boîte avec la ligne de base de la boîte parente, plus la moitié de la hauteur x du parent.

Dans le cas où l’élément parent – .vertical-center dans ce cas – a une height explicite, si nous pouvions avoir un élément enfant ayant exactement la même height le parent, nous pourrions déplacer la ligne de base du parent au milieu de l’enfant de taille .container et, de manière surprenante, nous .container verticalement notre enfant en stream souhaité – le .container – sur le centre.

Se réunir tous ensemble

Cela étant dit, nous pourrions créer un élément full-height dans les .vertical-center by ::before ou ::after et changer le type d’ display par défaut et l’autre enfant, le .container en inline-block .

Ensuite, utilisez vertical-align: middle; pour aligner les éléments en ligne verticalement.

Voici:

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

DEMO DE TRAVAIL

En outre, pour éviter les problèmes inattendus dans les petits écrans supplémentaires, vous pouvez redéfinir la hauteur du pseudo-élément sur auto ou sur 0 ou modifier son type d’ display sur none si nécessaire pour:

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

Mise à jour de la démo

Et encore une chose:

S’il y a des sections de footer / en- header autour du conteneur, il est préférable de positionner correctement ces éléments ( relative , absolute ? À vous.) Et d’append une valeur z-index élevée pour les garder toujours au dessus des autres .

ajoutez Bootstrap.css puis ajoutez ceci à votre css

 html, body{height:100%; margin:0;padding:0} .container-fluid{ height:100%; display:table; width: 100%; padding: 0; } .row-fluid {height: 100%; display:table-cell; vertical-align: middle;} .centering { float:none; margin:0 auto; } 
 Now call in your page 
Am in the Center Now :-)

Mise à jour 2018

Bootstrap 4 inclut flexbox, de sorte que la méthode de centrage vertical est beaucoup plus facile et ne nécessite pas de CSS supplémentaire .

Utilisez simplement les classes utilitaires d-flex et align-items-center .

 
content

http://www.codeply.com/go/ui6ABmMTLv

Dans Bootstrap 4 :

pour centrer l’enfant horizontalement , utilisez la classe bootstrap-4:

 justify-content-center 

pour centrer l’enfant verticalement , utilisez la classe bootstrap-4:

  align-items-center 

mais rappelez-vous n’oubliez pas d’utiliser la classe d-flex avec ceux-ci, c’est une classe utilitaire bootstrap-4, comme ça

 
MIDDLE

Remarque: veillez à append les utilitaires bootstrap-4 si ce code ne fonctionne pas

Je sais que ce n’est pas la réponse directe à cette question mais cela peut aider quelqu’un

Ma technique préférée:

 body { display: table; position: absolute; height: 100%; width: 100%; } .jumbotron { display: table-cell; vertical-align: middle; } 

Démo

 body { display: table; position: absolute; height: 100%; width: 100%; } .jumbotron { display: table-cell; vertical-align: middle; } 
  

The easiest and powerful way

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  • Redirect
    Visitors where they converts more.

  • Track
    Views, Clicks and Conversions.

  • Check
    Constantly the status of your links.

  • Collaborate
    With Customers, Partners and Co-Workers.

  • GET STARTED
    FREE VERSION AVAILABLE!

Testé dans IE, Firfox et Chrome.

CSS:

  .parent-container { position: relative; height:100%; width: 100%; } .child-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 

HTML:

  

Header Text

Some Text

Trouvé sur https://css-sortingcks.com/centering-css-complete-guide/

Voici comment j’utilise pour aligner le contenu verticalement – top / center / bottom avec bootstrap 3 lignes:

Voici la démo de violon: js violon

 Bootstrap 3 columns with same height and vertically aligned - 
 /* columns of same height styles */ .row-full-height { height: 100%; } .col-full-height { height: 100%; vertical-align: middle; } .row-same-height { display: table; width: 100%; /* fix overflow */ table-layout: fixed; } .col-xs-height { display: table-cell; float: none !important; } @media (min-width: 768px) { .col-sm-height { display: table-cell; float: none !important; } } @media (min-width: 992px) { .col-md-height { display: table-cell; float: none !important; } } @media (min-width: 1200px) { .col-lg-height { display: table-cell; float: none !important; } } /* vertical alignment styles */ .col-top { vertical-align: top; } .col-middle { vertical-align: middle; } .col-bottom { vertical-align: bottom; 
 

Demo 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus tincidunt porttitor. Praesent vehicula aliquam enim. Fusce non luctus eros, sit amet consequat velit. Pellentesque volutpat est et est imperdiet pharetra. Integer vestibulum feugiat malesuada. Proin a felis ut libero vestibulum fermentum ut sit amet est. Morbi placerat eget lacus sed sagittis. Nullam eu elit gravida arcu viverra facilisis. Quisque laoreet enim neque, ut consequat sem tincidunt at. Fusce lobortis scelerisque libero, eget vulputate neque.
2st column
3st column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus tincidunt porttitor. Praesent vehicula aliquam enim. Fusce non luctus eros, sit amet consequat velit. Pellentesque volutpat est et est imperdiet pharetra.