Truque: centralize uma div de posição absoluta

No CSS às vezes complicamos nossas vidas com coisas simples que são menos complicadas do que pensamos, e que, quando vemos a solução, quase rimos de observar tais anedotas.

Mais de uma pessoa me perguntou como centralizar um div posicionado de forma absoluta e a resposta é muito simples:

  1. Damos ao div uma largura fixa. Exemplo: 500px
  2. Absolutamente posicionamos o div com 50% restantes. Exemplo: posição: absoluta; esquerda: 50%;
  3. Subtraímos metade do que mede com a margem. Exemplo: margin-left: -250px;

O resultado é um div perfeitamente centralizado e posicionado de forma absoluta.


Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios são marcados com *

*

*

  1. Responsável pelos dados: Miguel Ángel Gatón
  2. Finalidade dos dados: Controle de SPAM, gerenciamento de comentários.
  3. Legitimação: Seu consentimento
  4. Comunicação de dados: Os dados não serão comunicados a terceiros, exceto por obrigação legal.
  5. Armazenamento de dados: banco de dados hospedado pela Occentus Networks (UE)
  6. Direitos: A qualquer momento você pode limitar, recuperar e excluir suas informações.

  1.   Ivan Lira dito

    Muito obrigado .. como vc diz algo tão simples e que apesar do passar do tempo ainda é autor de muitas dores de cabeça.
    Sua postagem foi muito útil para mim, muito obrigado.

  2.   vagem dito

    Muito obrigado !!!

  3.   GlbromanGenericName dito

    Boa contribuição me serviu muito obrigado

  4.   LUCASG dito

    Que grande maluco ele me serviu: D

  5.   vencedor dito

    Excelente obrigado ...

  6.   benjamin dito

    Muito bom Carlos.

  7.   Imagem de marcador de posição de Mario Lozano dito

    excelente informação

  8.   Frank Koq dito

    Obrigado me serviu

  9.   bagaço dito

    Você me salvou!!! Obrigado :)

  10.   Danielfloyd dito

    Obrigada tio, você me ajudou muito !!, aquela falta de imaginação minha.

  11.   Damian dito

    Muito obrigado !!!!! esse truque sempre me ajuda haha

  12.   o dito

    muito obrigado excelente amigo

  13.   Chrissmart Anji dito

    Isso não é centralizado, tudo depende do tamanho original do elemento div base que o fazemos crescer dependendo do que é colocado dentro, para mim foi mais útil usar isso do que visualmente se eu o vir ainda mais centrado e responsivo:

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

    isso seria a metade.

  14.   Edgar cjuno dito

    A contribuição é apreciada, me ajudou muito, saudações!

  15.   Miriam Jessé dito

    Muito boa contribuição me ajudou muito, mil graças!