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 !
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.
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.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
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.
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !