Astuce: centrer une position absolue div

En CSS, nous compliquons parfois nos vies avec des choses simples qui sont moins compliquées qu'on ne le pense, et que lorsque nous voyons la solution, nous nous moquons presque d'observer de telles anecdotes.

Plus d'une personne m'a demandé comment centrer une div absolument positionnée, et la réponse est très simple:

  1. Nous donnons au div une largeur fixe. Exemple: 500px
  2. Nous positionnons absolument la div avec 50% de gauche. Exemple: position: absolue; gauche: 50%;
  3. Nous soustrayons la moitié de ce qu'il mesure avec la marge. Exemple: margin-left: -250px;

Le résultat est un div parfaitement centré et parfaitement positionné.


Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont marqués avec *

*

*

  1. Responsable des données: Miguel Ángel Gatón
  2. Finalité des données: Contrôle du SPAM, gestion des commentaires.
  3. Légitimation: votre consentement
  4. Communication des données: Les données ne seront pas communiquées à des tiers sauf obligation légale.
  5. Stockage des données: base de données hébergée par Occentus Networks (EU)
  6. Droits: à tout moment, vous pouvez limiter, récupérer et supprimer vos informations.

  1.   Ivan Lira dit

    Merci beaucoup .. comme vous dites quelque chose de si simple et qui malgré le passage du temps est toujours l'auteur de nombreux maux de tête.
    Votre message m'a été très utile, merci beaucoup.

  2.   cosse dit

    Merci beaucoup !!!

  3.   Globroman dit

    Bonne contribution cela m'a beaucoup servi, merci

  4.   LUCASG dit

    Quel grand fou il m'a servi: D

  5.   vainqueur dit

    Excellent merci…

  6.   benjoin dit

    Très bon Carlos.

  7.   Mario Lozano dit

    excellente info

  8.   Frank Koq dit

    Merci, ça m'a servi

  9.   marc dit

    Tu m'as sauvé!!! Merci :)

  10.   Danielfloyd dit

    Merci mon oncle, tu m'as beaucoup aidé !!, ce manque d'imagination de la mienne.

  11.   damian dit

    Merci beaucoup !!!!! cette astuce m'aide toujours haha

  12.   o dit

    merci beaucoup excellent ami

  13.   Chrismart Anji dit

    Ce n'est pas centré, tout dépend de la taille d'origine de l'élément div de base que nous faisons grandir en fonction de ce qui est mis à l'intérieur, pour moi c'était plus utile d'utiliser cela que visuellement si je le vois encore plus centré et reponsif:

    absolu;
    gauche: 50%;
    marge gauche: -100px;

    ce serait la moitié.

  14.   Edgar cjuno dit

    La contribution est appréciée, elle m'a vraiment aidé, salutations!

  15.   Myriam Jess dit

    Une très bonne contribution m'a beaucoup aidé, mille grâce!