Suite à un centrage vertical difficile sur mon site qui m'a fait galérer, j'ai découvert en bidouillant une solution que je n'ai pas trouvé sur le web:

Oubliez les conteneur en relative et l'objet à l'intérieur en absolute avec d'autres propriétés qui ne semblent pas claires à première vue....

On ne s'intéressera ici qu'au centrage vertical mais cette méthode est fesable pour un centrage horizontal.

Votre élément à centrer verticalement: 

<div id="element_centre_verticalement"></div>

Son CSS:

#element_centre_verticalement{
   background-color: black;
   width: 40px;
   height: 40px;
   margin-top: -20px; /* On déplace l'élément de la moitié de sa hauteur, en retrait. */
   position: relative;/* on lui confère la position relative */
   top: 50vh; /* On décale l'élément depuis le haut de 50% de la hauteur disponible (du viewport, soit 50vh)
}

Ainsi l'élément est parfaitement centré de façon verticale, sur n'importe quel support !

Et qu'est-ce qui se passe si le type est sur téléphone ?

Eh bien c'est également centré verticalement ! Vu qu'on décale l'élément, depuis son centre, de 50% du viewport (donc de la hauteur du support d'affichage), il se trouve donc également à 50% du bas, soit le juste milieux.

Hello,

- Faisable*

- Ne fonctionne pas si l'élément a une taille dynamique

- Flex > all

-
Edité par MrChampy 11 janvier 2018 à 14:43:41

display flex fait pareil en mieux et en 2lignes...pourquoi s'en priver

-
Edité par pierreletet 11 janvier 2018 à 17:12:39

Bonjour,

on voit fleurir vh et vw partout en ce moment : c'est cool, mais c'est pas toujours adapté. Les blocs ne font pas toujours 100vw de large, ou 100vh de haut : on peut vouloir centrer dans un bloc distinct et non pas "dans la page".

Donc oui, comme dit plus haut : flex est plus pertinent ici.

Je m'immisce dans la discussion pour vous présenter une petite ressource bien pratique : http://howtocenterincss.com 

Pratique mais qui produit du CSS inline, c'est triste…

Pour augmenter la compatibilité avec les navigateurs plus anciens (non compatibles flex) on peut aussi utiliser display:table-cell;

Hello,

Et si ton élément a une hauteur variable, ou que tu ne la connais pas à l'avance ? S'il est dans un bloc qui change de taille ? Paf le chien.Flexbox est clairement la meilleure solution ici, et effectivement, un display: table-cell sinon.

Bon je m'incline j'ai cru trouver une solution miracle mais c'est vrai que flex-box ça reste archi cool pour tout disposer ^^'

https://code.sololearn.com/WwI4UCudkVMK/?ref=app