Trick: sentro ng isang ganap na posisyon div

Sa CSS minsan ay kumplikado natin ang ating buhay ng mga simpleng bagay na hindi gaanong kumplikado kaysa sa iniisip namin, at na kapag nakita natin ang solusyon ay halos tawa tayo sa pagmamasid sa mga ganoong anecdotes.

Higit sa isang tao ang nagtanong sa akin kung paano isentro ang isang ganap na nakaposisyon div, at ang sagot ay napaka-simple:

  1. Binibigyan namin ang div ng isang nakapirming lapad. Halimbawa: 500px
  2. Ganap na posisyon namin ang div na may 50% na natitira. Halimbawa: posisyon: ganap; kaliwa: 50%;
  3. Ibinawas namin ang kalahati ng sinusukat nito sa margin. Halimbawa: margin-left: -250px;

Ang resulta ay isang perpektong nakasentro, ganap na nakaposisyon div.


Ang nilalaman ng artikulo ay sumusunod sa aming mga prinsipyo ng etika ng editoryal. Upang mag-ulat ng isang pag-click sa error dito.

15 na puna, iwan mo na ang iyo

Iwanan ang iyong puna

Ang iyong email address ay hindi nai-publish.

*

*

  1. Responsable para sa data: Miguel Ángel Gatón
  2. Layunin ng data: Kontrolin ang SPAM, pamamahala ng komento.
  3. Legitimation: Ang iyong pahintulot
  4. Komunikasyon ng data: Ang data ay hindi maiparating sa mga third party maliban sa ligal na obligasyon.
  5. Imbakan ng data: Ang database na naka-host ng Occentus Networks (EU)
  6. Mga Karapatan: Sa anumang oras maaari mong limitahan, mabawi at tanggalin ang iyong impormasyon.

  1.   Ivan Lira dijo

    Maraming salamat .. habang sinasabi mo ang isang bagay na napakasimple at na sa kabila ng pagdaan ng panahon ay may-akda pa rin ng maraming sakit ng ulo.
    Napaka kapaki-pakinabang sa akin ang iyong post, maraming salamat.

  2.   ulupong dijo

    Maraming salamat !!!

  3.   Glbroman dijo

    Magandang kontribusyon ito ay nagsilbi sa akin ng maraming, salamat

  4.   LUCASG dijo

    Napakalaking baliw na pinaglingkuran niya ako: D

  5.   matagumpay dijo

    Magaling salamat ...

  6.   Benjamin dijo

    Napakagandang Carlos.

  7.   Larawan ng placeholder ni Mario Lozano dijo

    mahusay na impormasyon

  8.   Frank Koq dijo

    Salamat, nagsilbi ito sa akin

  9.   Marc dijo

    Niligtas mo ako!!! Salamat :)

  10.   Danielfloyd dijo

    Salamat tito, malaki ang naitulong mo sa akin !!, iyong kawalan ng imahinasyon ko.

  11.   damian dijo

    maraming salamat !!!!! ang trick na ito ay laging tumutulong sa akin haha

  12.   o dijo

    maraming salamat kaibigan

  13.   Chrismart Anji dijo

    Hindi ito nakasentro, nakasalalay ang lahat sa orihinal na sukat ng base div na elemento kung saan natin ito pinalalaki depende sa kung ano ang inilagay sa loob, para sa akin mas kapaki-pakinabang itong gamitin kaysa sa paningin kung nakikita ko itong mas nakasentro at tumutugon. :

    ganap na;
    kaliwa: 50%;
    kaliwa-kaliwa: -100px;

    magiging kalahati iyon

  14.   Edgar cjuno dijo

    Pinahahalagahan ang kontribusyon, talagang nakatulong ito sa akin, pagbati!

  15.   Miriam Jess dijo

    Napakagandang kontribusyon ay nakatulong sa akin ng malaki, isang libong biyaya!