Truco: centra unha posición absoluta div

En CSS ás veces complicamos a nosa vida con cousas sinxelas menos complicadas do que pensamos, e que cando vemos a solución case nos rimos de observar tales anécdotas.

Máis dunha persoa preguntoume como centrar un div absolutamente posicionado e a resposta é moi sinxela:

  1. Damos ao div un ancho fixo. Exemplo: 500 px
  2. Posicionamos absolutamente o div cun 50% restante. Exemplo: posición: absoluta; esquerda: 50%;
  3. Restamos a metade do que mide coa marxe. Exemplo: marxe-esquerda: -250px;

O resultado é un div perfectamente centrado e absolutamente posicionado.


O contido do artigo adhírese aos nosos principios de ética editorial. Para informar dun erro faga clic en aquí.

15 comentarios, deixa os teus

Deixa o teu comentario

Enderezo de correo electrónico non será publicado. Os campos obrigatorios están marcados con *

*

*

  1. Responsable dos datos: Miguel Ángel Gatón
  2. Finalidade dos datos: controlar SPAM, xestión de comentarios.
  3. Lexitimación: o seu consentimento
  4. Comunicación dos datos: os datos non serán comunicados a terceiros salvo obrigación legal.
  5. Almacenamento de datos: base de datos aloxada por Occentus Networks (UE)
  6. Dereitos: en calquera momento pode limitar, recuperar e eliminar a súa información.

  1.   Iván Lira dixo

    Moitas grazas .. como dis algo tan sinxelo e que a pesar do paso do tempo segue sendo o autor de moitas dores de cabeza.
    A túa publicación foi moi útil para min, moitas grazas.

  2.   pod dixo

    Moitas grazas !!!

  3.   Glbroman dixo

    Boa contribución serviume moito, grazas

  4.   LUCASG dixo

    Que tolo me serviu: D

  5.   gañador dixo

    Excelentes grazas ...

  6.   Benjamin dixo

    Moi bo Carlos.

  7.   Marcador de posición de Mario Lozano dixo

    excelente información

  8.   Frank Koq dixo

    Grazas, servíame

  9.   bagazo dixo

    Salváchesme !!! Grazas :)

  10.   Danielfloyd dixo

    Grazas tío, axudáchesme moito !!, esa miña falta de imaxinación.

  11.   Damián dixo

    moitas grazas !!!!! este truco sempre me axuda jaja

  12.   o dixo

    moitas grazas excelente amigo

  13.   Chrismart Anji dixo

    Isto non está centrado, todo depende do tamaño orixinal do elemento div base que o facemos crecer dependendo do que se coloque dentro, para min foi máis útil usalo que visualmente se o vexo aínda máis centrado e responsivo:

    absoluto;
    esquerda: 50%;
    marxe-esquerda: -100px;

    iso sería a metade.

  14.   Edgar cjuno dixo

    Agradécese a contribución, realmente me axudou, saúdos!

  15.   Miriam Jess dixo

    Moi boa contribución axudoume moitísimo, mil graza!