Truc: centreer een absolute positie div

In CSS maken we ons leven soms ingewikkeld met simpele dingen die minder ingewikkeld zijn dan we denken, en dat als we de oplossing zien, we bijna lachen om zulke anekdotes.

Meer dan één persoon heeft me gevraagd hoe een absoluut gepositioneerde div te centreren, en het antwoord is heel simpel:

  1. We geven de div een vaste breedte. Voorbeeld: 500px
  2. We plaatsen de div absoluut met 50% over. Voorbeeld: positie: absoluut; links: 50%;
  3. We trekken de helft van wat het meet af met de marge. Voorbeeld: margin-left: -250px;

Het resultaat is een perfect gecentreerde, absoluut gepositioneerde div.


Laat je reactie achter

Uw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *

*

*

  1. Verantwoordelijk voor de gegevens: Miguel Ángel Gatón
  2. Doel van de gegevens: Controle SPAM, commentaarbeheer.
  3. Legitimatie: uw toestemming
  4. Mededeling van de gegevens: De gegevens worden niet aan derden meegedeeld, behalve op grond van wettelijke verplichting.
  5. Gegevensopslag: database gehost door Occentus Networks (EU)
  6. Rechten: u kunt uw gegevens op elk moment beperken, herstellen en verwijderen.

  1.   Ivan Lira zei

    Heel erg bedankt .. als je iets zo eenvoudigs zegt en dat ondanks het verstrijken van de tijd nog steeds de auteur van veel hoofdpijn is.
    Je bericht was erg nuttig voor mij, heel erg bedankt.

  2.   maïskolf zei

    Hartelijk bedankt !!!

  3.   glbroman zei

    Een goede bijdrage heeft me veel geholpen, bedankt

  4.   LUCASG zei

    Wat een geweldige gek heeft hij me gediend: D

  5.   overwinnaar zei

    Uitstekend, dankjewel…

  6.   Benjamin zei

    Heel goede Carlos.

  7.   Tijdelijke afbeelding voor Mario Lozano zei

    Uitstekende info

  8.   Frank Kok zei

    Dank je, het heeft me gediend

  9.   marc zei

    Je hebt me gered!!! Dank je :)

  10.   Danielfloyd zei

    Dank je oom, je hebt me veel geholpen !!, dat gebrek aan verbeeldingskracht van mij.

  11.   damian zei

    hartelijk bedankt !!!!! deze truc helpt me altijd haha

  12.   o zei

    heel erg bedankt uitstekende vriend

  13.   Chrissmart Anji zei

    Dit is niet gecentreerd, het hangt allemaal af van de oorspronkelijke grootte van het basis div-element waarnaar we het laten groeien, afhankelijk van wat erin is geplaatst, voor mij was het nuttiger om dit te gebruiken dan visueel als ik het nog meer gecentreerd en reponsief zie :

    absoluut;
    links: 50%;
    marge-links: -100 px;

    dat zou de helft zijn.

  14.   Edgar Cjuno zei

    De bijdrage wordt gewaardeerd, het heeft me echt geholpen, groetjes!

  15.   Mirjam Jess zei

    Zeer goede bijdrage heeft me veel geholpen, duizend genade!