Partage

Centrer verticalement très très simple

Pour centrer le plus facilement possible !!!

10 janvier 2018 à 18:34:43

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 !


Anonyme
10 janvier 2018 à 19:52:01

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

11 janvier 2018 à 9:23:42

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.
11 janvier 2018 à 9:41:50

Hello,

- Faisable*

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

- Flex > all

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

11 janvier 2018 à 17:12:23

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

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

Staff 11 janvier 2018 à 17:17:06

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.

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
11 janvier 2018 à 17:20:48

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

Recherche l'avis de développeurs front : Devenir un meilleur dev front ?
Staff 11 janvier 2018 à 17:25:31

Pratique mais qui produit du CSS inline, c'est triste…
Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
11 janvier 2018 à 17:45:23

Pour augmenter la compatibilité avec les navigateurs plus anciens (non compatibles flex) on peut aussi utiliser display:table-cell;
11 janvier 2018 à 20:08:06

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. :)

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
13 janvier 2018 à 12:19:43

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 ^^'
13 janvier 2018 à 23:45:57

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

Centrer verticalement très très simple

× 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.
  • Editeur
  • Markdown