Trick: centrera en absolut position div

Ibland komplicerar vi våra liv med CSS med enkla saker som är mindre komplicerade än vi tror, och att när vi ser lösningen nästan skrattar åt att observera sådana anekdoter.

Mer än en person har frågat mig hur man centrerar en absolut positionerad div, och svaret är väldigt enkelt:

  1. Vi ger div en fast bredd. Exempel: 500 pixlar
  2. Vi placerar absolut div med 50% kvar. Exempel: position: absolut; vänster: 50%;
  3. Vi subtraherar hälften av vad den mäter med marginalen. Exempel: marginal-vänster: -250 pixlar;

Resultatet är en perfekt centrerad, absolut positionerad div.


Innehållet i artikeln följer våra principer om redaktionell etik. Klicka på för att rapportera ett fel här.

15 kommentarer, lämna din

Lämna din kommentar

Din e-postadress kommer inte att publiceras.

*

*

  1. Ansvarig för uppgifterna: Miguel Ángel Gatón
  2. Syftet med uppgifterna: Kontrollera skräppost, kommentarhantering.
  3. Legitimering: Ditt samtycke
  4. Kommunikation av uppgifterna: Uppgifterna kommer inte att kommuniceras till tredje part förutom enligt laglig skyldighet.
  5. Datalagring: databas värd för Occentus Networks (EU)
  6. Rättigheter: När som helst kan du begränsa, återställa och radera din information.

  1.   Ivan Lira sade

    Tack så mycket ... som ni säger något så enkelt och att det trots tidens gång fortfarande är författare till många huvudvärk.
    Ditt inlägg var mycket användbart för mig, tack så mycket.

  2.   majskolv sade

    Tack så mycket !!!

  3.   Glbroman sade

    Bra bidrag hjälpte mig mycket, tack

  4.   LUCASG sade

    Vilken galning han tjänade mig: D

  5.   victor sade

    Utmärkt tack…

  6.   benjamin sade

    Mycket bra Carlos.

  7.   Platshållarbild för Mario Lozano sade

    Utmärkt info

  8.   Frank Koq sade

    Tack, det tjänade mig

  9.   marc sade

    Du räddade mig!!! Tack :)

  10.   Danielfloyd sade

    Tack farbror, du hjälpte mig mycket !!, min brist på fantasi.

  11.   damian sade

    tack så mycket !!!!! det här tricket hjälper mig alltid haha

  12.   o sade

    tack så mycket utmärkt vän

  13.   Chrismart Anji sade

    Det här är inte centrerat, det beror helt på den ursprungliga storleken på basdelelementet som vi får det att växa till beroende på vad som sätts inuti, för mig var det mer användbart att använda detta än visuellt om jag ser det ännu mer centrerat och reponsivt :

    absolut;
    vänster: 50%;
    marginal-vänster: -100px;

    det skulle vara hälften.

  14.   Edgar cjuno sade

    Bidraget uppskattas, det hjälpte mig verkligen, hälsningar!

  15.   Miriam Jess sade

    Mycket bra bidrag hjälpte mig mycket, tusen nåd!