A arte de centralizar div tanto na horizontal quanto na vertical é discutida a anos pelos desenvolvedores Web, hoje apresentaremos uma das maneiras de centralizar uma div tanto na horizontal quanto na vertical.

Resolvi escrever este artigo depois que voltei a trabalhar com implementação e percebi que existem várias técnicas para centralizar o conteúdo e a maioria é ineficiente, porém neste artigo explicarei que como centralizar seu site com uma técnica simples e direta.

O HTML

Felizmente com o advento do Webstandards o HTML se mantém sempre é simples, independete do problema ou solução.

E através do CSS ou JavaScript conseguimos resolver a maioria dos problemas, o que na verdade é um grande alívio, pois dar manutenção no conteúdo no passado era um verdadeiro tormento, tendo que navegar em grandes emaranhados de código.

Agora veremos como ficará o HTML quando queremos centralizar uma div, lembrando que com esta técnica é possível centralizar sites complexos ou simples, de forma organizada e com simplicidade.

    <div id="divCentralizada">
       <p>
          conteúdo centralizada
       </p>
    </div>

O HTML acima nos da 3 elementos, a o <div> que será centralizada, o <p> que representa o conteúdo da página e o texto, apenas para ilustrar como seu conteúdo ficaria centralizado neste exemplo.

O CSS

No CSS iremos posicionar esta DIV (#divCentralizada) através doposition: absolute;, ele fará com que a DIV deixe de respeitar o resto do conteúdo e passe a ter uma posição absoluta na página.

Agora que a div(#divCentralizada) esta alinhada independente do “resto”, com isso poderemos definir o top e o left que fará com que nossa DIV se afaste da margem interna do navegador.

Para ambos informaremos 50%, com isso as margens da DIV serão literalmente posicionadas ao centro da tela, veja o código:

<html>
  <header>
    <title>Exemplo 2 - OGENIAL!</title>
    <style>
      #divCentralizada {
        position: absolute;
        width: 600px;
        height: 300px;
        left: 50%;
        top:50%;
        background-color: gray;
      }
    </style>
  </header>
  <body>
    <div id="divCentralizada">
      <p>
        conte&uacute;do centralizada
      </p>
    </div>
  </body>
</html>
Como centralizar uma div

imagem 1 – como centralizar uma div

Como podemos ver, ele posicionou a “ponta” da div a 50% de distância da borda esquerda e o mesmo fez com o a borda superior da div que foi posicionada exatamente no meio da tela, porém esperamos que o alinhamento seja feito não através da extremidade da nossa DIV mãe e sim através do seu meio, o que devemos fazer agora é setar uma margem negativa com metade das dimensões da div, como no exemplo acima informamos o tamanho (width com 600px deveremos informar uma margem a esquerda com -300px; (300 negativo) desta forma ela ira recuar até que o centro da DIV fique no centro da tela.

Desta forma a DIV será posicionada primeiro a 50% da disância da margem e logo depois recuará 50% do seu tamanho, acertando exatamento o centro, o mesmo deverá ser feito com a margem superior como vemos no exemplo abaixo.

<html>
   <header>
      <title>Exemplo 2 - OGENIAL!</title>
      <style>
         #divCentralizada {
            position: absolute;
            width: 600px;
            height: 300px;
            left: 50%;
            top:50%;
            margin-left: -300px;
            margin-top: -150px;
            background-color: gray;
         }
      </style>
   </header>
   <body>
      <div id="divCentralizada">
         <p>
            conte&uacute;do centralizada
         </p>
      </div>
    </body>
</html>

Então com esta simples técnica conseguimos centralizar uma dív na tela obtendo o resultado abaixo.

DIV centralizada apartir do seu centro

centralizando uma div – imagem 2

Acredito que seja válido observar também que a DIV foi centralizada, porém o conteúdo permaneceu alinhado conforme o padrão da página, não atrapalhando assim o “resto” do layout.

Centralizar div em vários navegadores

Este processo é utilizado em diversos sites pelo mundo todo pois funciona no IE 6, IE 7, IE 8 e IE 9, FireFox (2,3) e Google Chrome.

Pois é, centralizar div`s no Internet Explorer foi sempre um problema, mas agora, com esta técnica esta muito mais fácil.

Porque não utilizar a tag <center> para centralizar o conteúdo

A algum tempo a tag <center> era muito utilizada em algumas técnicas para centralizar o conteúdo, porém com o advento do CSS e as novas preocupações dos webmaster`s a tag <center> deixou de ser utilizada e finalmente foi depreciada pela W3C, sendo agora descartada como técnica viável para centralização.


106 Comments

  1. Posted 19 de outubro de 2010 at 12:03 | Permalink

    Parabéns pelo Blog

  2. Posted 19 de outubro de 2010 at 12:03 | Permalink

    Parabéns pelo Blog

  3. Marco antônio
    Posted 20 de outubro de 2010 at 12:47 | Permalink

    Olá amigo,

    Muito bacana seu artigo, porém gostaria de saber como centralizar uma imagem em uma página HTML, será que é muito complexo? estou tentando o seguinte:

    <center>
    <img src=”minhaimagem.jpg” />
    </center>

    desta forma minha imagem fica centralizada, porém o conteúdo não respeita a posição dela na tela, quando puder, gostaria de mais informações.

    Parabéns pelo BLOG!

    • Posted 20 de outubro de 2010 at 13:57 | Permalink

      Olá Marco,

      Que bom que você gostou do blog. Bom o que vc quer fazer na verdade é alinhar a imagem, utilize a propriedade align para centralizar a imagem:

      <img src=”img.jpg” align=”center”/>

  4. Marco antônio
    Posted 20 de outubro de 2010 at 12:47 | Permalink

    Olá amigo,

    Muito bacana seu artigo, porém gostaria de saber como centralizar uma imagem em uma página HTML, será que é muito complexo? estou tentando o seguinte:

    <center>
    <img src=”minhaimagem.jpg” />
    </center>

    desta forma minha imagem fica centralizada, porém o conteúdo não respeita a posição dela na tela, quando puder, gostaria de mais informações.

    Parabéns pelo BLOG!

    • Posted 20 de outubro de 2010 at 13:57 | Permalink

      Olá Marco,

      Que bom que você gostou do blog. Bom o que vc quer fazer na verdade é alinhar a imagem, utilize a propriedade align para centralizar a imagem:

      <img src=”img.jpg” align=”center”/>

  5. Borges Alberto
    Posted 22 de outubro de 2010 at 10:11 | Permalink

    Olá amigo, gostaria de saber se existe algum comando css para centralizar div, pois achei o processo muito complicado, ai queria um comando css que centralize tudo automaticamente, entendeu? ai no caso seria só para centralizar uma div principal mesmo, bem simples tem como?

    • Posted 22 de outubro de 2010 at 10:23 | Permalink

      Borges, Infelizmente não há nenhuma forma fácil de centralizar o conteúdo, tem que usar a técnica utilizada nesta página.

      • Posted 15 de dezembro de 2010 at 09:53 | Permalink

        É verdade, eu usava a propriedade ‘margin:0 auto;’ para centralizar os blocos mas no IE8 parou de funcionar. O estranho é que tenho um site em que isso funciona, no outro não. Descobri este blog tentando resolver este problema. Às vezes, parece que o IE tem vontade própria e alguns sites ele simplesmente gosta, outros não.

        Depois de ter visto este post, estou mudando de técnica. Vou seguir o que está aqui.

  6. Borges Alberto
    Posted 22 de outubro de 2010 at 10:11 | Permalink

    Olá amigo, gostaria de saber se existe algum comando css para centralizar div, pois achei o processo muito complicado, ai queria um comando css que centralize tudo automaticamente, entendeu? ai no caso seria só para centralizar uma div principal mesmo, bem simples tem como?

    • Posted 22 de outubro de 2010 at 10:23 | Permalink

      Borges, Infelizmente não há nenhuma forma fácil de centralizar o conteúdo, tem que usar a técnica utilizada nesta página.

      • Posted 15 de dezembro de 2010 at 09:53 | Permalink

        É verdade, eu usava a propriedade ‘margin:0 auto;’ para centralizar os blocos mas no IE8 parou de funcionar. O estranho é que tenho um site em que isso funciona, no outro não. Descobri este blog tentando resolver este problema. Às vezes, parece que o IE tem vontade própria e alguns sites ele simplesmente gosta, outros não.

        Depois de ter visto este post, estou mudando de técnica. Vou seguir o que está aqui.

  7. Agnaldo Dante
    Posted 24 de outubro de 2010 at 16:09 | Permalink

    Olá Amigo, li o seu artigo e achei muito interessante, porém gostaria de uma dica para através do css centralizar na vertical div dentro outra div, será que é possível?

    • Posted 24 de outubro de 2010 at 16:15 | Permalink

      Opa, você pode utilizar a mesma técnica, só não é necessário utilizar position: absolute nem left pois as div`s deverão estar no mesmo plano, você dever fazer a conta do tamanho da div mãe e subtrair pelo tamanho da div filha, o resultado você deverá dividir por dois e colocar no margin-left.

  8. Agnaldo Dante
    Posted 24 de outubro de 2010 at 16:09 | Permalink

    Olá Amigo, li o seu artigo e achei muito interessante, porém gostaria de uma dica para através do css centralizar na vertical div dentro outra div, será que é possível?

    • Posted 24 de outubro de 2010 at 16:15 | Permalink

      Opa, você pode utilizar a mesma técnica, só não é necessário utilizar position: absolute nem left pois as div`s deverão estar no mesmo plano, você dever fazer a conta do tamanho da div mãe e subtrair pelo tamanho da div filha, o resultado você deverá dividir por dois e colocar no margin-left.

  9. Musse
    Posted 26 de outubro de 2010 at 17:53 | Permalink

    MUITO BOM, finalmente conseguir centralizar essa bagaça, parabens meu caro.

  10. Musse
    Posted 26 de outubro de 2010 at 17:53 | Permalink

    MUITO BOM, finalmente conseguir centralizar essa bagaça, parabens meu caro.

  11. Rogério
    Posted 28 de outubro de 2010 at 17:28 | Permalink

    Amigo, obrigado por ensinar como centralizar uma div de acordo com o tamanho do browser!

  12. Rogério
    Posted 28 de outubro de 2010 at 17:28 | Permalink

    Amigo, obrigado por ensinar como centralizar uma div de acordo com o tamanho do browser!

  13. Henrique
    Posted 9 de novembro de 2010 at 14:00 | Permalink

    cara, mto boa explicação! vlw!

  14. Henrique
    Posted 9 de novembro de 2010 at 14:00 | Permalink

    cara, mto boa explicação! vlw!

  15. Roberto
    Posted 18 de novembro de 2010 at 09:31 | Permalink

    Cara, muito bom, finalmente consegui centralizar o conteúdo do meu site, parabéns!

  16. Roberto
    Posted 18 de novembro de 2010 at 09:31 | Permalink

    Cara, muito bom, finalmente consegui centralizar o conteúdo do meu site, parabéns!

  17. Posted 21 de dezembro de 2010 at 10:15 | Permalink

    VLW, Consegui entender essa técnica.

  18. Posted 21 de dezembro de 2010 at 10:15 | Permalink

    VLW, Consegui entender essa técnica.

  19. helena
    Posted 17 de fevereiro de 2011 at 09:25 | Permalink

    Olá, parabéns pelo artigo, muito bom.
    Apenas há um probleminha que encontrei, se você diminuir o tamanho da janela na largura para um tamanho menor que a largura da div, uma parte da mesma fica escondido(cortado) e sem scroll a direita.
    Pode-se utilizar então também o seguinte css para centralizar { position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto;}. Funciona direitinho mesmo diminuindo a janela, só que não no IE7 (fica a esquerda).

    • Posted 17 de fevereiro de 2011 at 12:54 | Permalink

      Olá Helena, obrigado pela dica, realmente utilizar o margin: auto é mais o correto, mas ainda prefiro a solução que funcione em mais navegadores, até pq, somente esta DIV que some, o conteúdo quebra de acordo com o tamanho disponível.

  20. helena
    Posted 17 de fevereiro de 2011 at 09:25 | Permalink

    Olá, parabéns pelo artigo, muito bom.
    Apenas há um probleminha que encontrei, se você diminuir o tamanho da janela na largura para um tamanho menor que a largura da div, uma parte da mesma fica escondido(cortado) e sem scroll a direita.
    Pode-se utilizar então também o seguinte css para centralizar { position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto;}. Funciona direitinho mesmo diminuindo a janela, só que não no IE7 (fica a esquerda).

    • Posted 17 de fevereiro de 2011 at 12:54 | Permalink

      Olá Helena, obrigado pela dica, realmente utilizar o margin: auto é mais o correto, mas ainda prefiro a solução que funcione em mais navegadores, até pq, somente esta DIV que some, o conteúdo quebra de acordo com o tamanho disponível.

  21. Vládia Queiroz
    Posted 26 de fevereiro de 2011 at 22:11 | Permalink

    Poxa, bacana! Olha só, eu sou novata em códigos, então, veja se pode me ajudar: quero centralizar o background da área de postagem do blog na altura, ele já é centralizado na largura. Mas não sei onde devo alterar isso no código dele, qual div deve ser alterada pra isso. Lembrando, o que quero centralizar é o background da área de postagem, não o background do blog (esse eu já consegui centralizar com o background-position: center. Então será que pode me ajudar? obrigada.

  22. Vládia Queiroz
    Posted 26 de fevereiro de 2011 at 22:11 | Permalink

    Poxa, bacana! Olha só, eu sou novata em códigos, então, veja se pode me ajudar: quero centralizar o background da área de postagem do blog na altura, ele já é centralizado na largura. Mas não sei onde devo alterar isso no código dele, qual div deve ser alterada pra isso. Lembrando, o que quero centralizar é o background da área de postagem, não o background do blog (esse eu já consegui centralizar com o background-position: center. Então será que pode me ajudar? obrigada.

  23. Maria
    Posted 5 de maio de 2011 at 17:13 | Permalink

    Em relação a uma div a ser centralizada dentro de uma div de largura 100%, a técnica é a mesma?

  24. Maria
    Posted 5 de maio de 2011 at 17:13 | Permalink

    Em relação a uma div a ser centralizada dentro de uma div de largura 100%, a técnica é a mesma?

  25. Fred Stamberg
    Posted 24 de maio de 2011 at 17:44 | Permalink

    Valeu pela dica cara.
    Ajudou muito!

  26. Fred Stamberg
    Posted 24 de maio de 2011 at 17:44 | Permalink

    Valeu pela dica cara.
    Ajudou muito!

  27. Posted 25 de maio de 2011 at 12:48 | Permalink

    Muito bom o tópico, valeu!!

  28. Posted 25 de maio de 2011 at 12:48 | Permalink

    Muito bom o tópico, valeu!!

  29. Rodrigo
    Posted 24 de outubro de 2011 at 15:46 | Permalink

    Onde coloco esses comandos???

    • Posted 24 de outubro de 2011 at 17:50 | Permalink

      Olá Rodrigo,

      Não consegui entender a sua dúvida. No caso os exemplos são HTML e CSS, cada código deverá ficar no seu respectivo arquivo, caso não seja esta sua dúvida, especifique melhor em um novo comentário.

      att,
      Lucas Schirm

  30. Rodrigo
    Posted 24 de outubro de 2011 at 15:46 | Permalink

    Onde coloco esses comandos???

    • Posted 24 de outubro de 2011 at 17:50 | Permalink

      Olá Rodrigo,

      Não consegui entender a sua dúvida. No caso os exemplos são HTML e CSS, cada código deverá ficar no seu respectivo arquivo, caso não seja esta sua dúvida, especifique melhor em um novo comentário.

      att,
      Lucas Schirm

  31. Apulko
    Posted 11 de novembro de 2011 at 16:51 | Permalink

    Háááá!!! Mano!!

    Não sou de comentar mas…

    Até que enfim um tutorial que funcionou!!

    Nossa me ajudou muiiiiiiiiiiiiiiito!!!!

    Obrigado!

  32. Apulko
    Posted 11 de novembro de 2011 at 16:51 | Permalink

    Háááá!!! Mano!!

    Não sou de comentar mas…

    Até que enfim um tutorial que funcionou!!

    Nossa me ajudou muiiiiiiiiiiiiiiito!!!!

    Obrigado!

  33. Posted 22 de novembro de 2011 at 20:48 | Permalink

    Isso que é artigo amigo!
    Tá de Parabéns !!!

  34. Posted 22 de novembro de 2011 at 20:48 | Permalink

    Isso que é artigo amigo!
    Tá de Parabéns !!!

  35. Henrique
    Posted 29 de novembro de 2011 at 00:04 | Permalink

    Muito bom mesmo!!! uma maneira simples de centralizar em qualquer resolução!!

  36. Henrique
    Posted 29 de novembro de 2011 at 00:04 | Permalink

    Muito bom mesmo!!! uma maneira simples de centralizar em qualquer resolução!!

  37. berg
    Posted 13 de janeiro de 2012 at 17:12 | Permalink

    só para notificar: certamente o HTML5 já estava subindo a cabeça do autor do post, pois colocou nas tags assim .

  38. berg
    Posted 13 de janeiro de 2012 at 17:12 | Permalink

    só para notificar: certamente o HTML5 já estava subindo a cabeça do autor do post, pois colocou nas tags assim .

  39. Nicoli
    Posted 13 de janeiro de 2012 at 21:16 | Permalink

    Nossa, obrigada mesmo. Tava sofrendo pra conseguir, quando dava certo no IE ficava errado no Mozilla e no Chrome. Muito bom (:

  40. Nicoli
    Posted 13 de janeiro de 2012 at 21:16 | Permalink

    Nossa, obrigada mesmo. Tava sofrendo pra conseguir, quando dava certo no IE ficava errado no Mozilla e no Chrome. Muito bom (:

  41. Rogerio
    Posted 18 de janeiro de 2012 at 12:57 | Permalink

    Boa tarde, estou com um problema que está me tirando do sério. Ao criar barra de busca txt e um botão btn no dreamweaver, onde eles são alinhados horizontalmente, e no preview do dw aparece alinhado, no IE9 fica desalinhado. No googlechrome fica alinhada e no mozilla tbem. Eu sou somente um curioso e estou tentando bolar um site, não conheço a fundo. Agradeceria se alguém pudesse me ajudar, pois já tentei de tudo e ainda fica desalinhado só no IE9.

    • Posted 26 de janeiro de 2012 at 14:50 | Permalink

      Rogerio, quando for assim, por favor nos passe um endereço para acessar seu HTML, assim poderemos ajudar.

  42. Rogerio
    Posted 18 de janeiro de 2012 at 12:57 | Permalink

    Boa tarde, estou com um problema que está me tirando do sério. Ao criar barra de busca txt e um botão btn no dreamweaver, onde eles são alinhados horizontalmente, e no preview do dw aparece alinhado, no IE9 fica desalinhado. No googlechrome fica alinhada e no mozilla tbem. Eu sou somente um curioso e estou tentando bolar um site, não conheço a fundo. Agradeceria se alguém pudesse me ajudar, pois já tentei de tudo e ainda fica desalinhado só no IE9.

    • Posted 26 de janeiro de 2012 at 14:50 | Permalink

      Rogerio, quando for assim, por favor nos passe um endereço para acessar seu HTML, assim poderemos ajudar.

  43. Posted 1 de fevereiro de 2012 at 18:07 | Permalink

    Nooooosssa, quebrei muito a cabeça com isso. Tentei de tudo antes de achar sua matéria. Continue com o ótimo trabalho.
    Grato

  44. Posted 1 de fevereiro de 2012 at 18:07 | Permalink

    Nooooosssa, quebrei muito a cabeça com isso. Tentei de tudo antes de achar sua matéria. Continue com o ótimo trabalho.
    Grato

  45. Posted 8 de fevereiro de 2012 at 17:21 | Permalink

    Bem bacana seu post, eu só queria tirar uma dúvida, como faço para deixar a div pai centralizada e as demais divs, como topo, imagens, textos, todas acompanhando esta div pai, como a do seu blog, o fundo cinza e o site no meio, se vc ver no meu site está centralizado a esquerda……tenho um projeto que o cliente quer parecido com o seu blog, um fundo…e o site centralizado com todo conteúdo dentro

    Obrigado pela sua atenção

    Abs

    • Posted 22 de fevereiro de 2012 at 18:02 | Permalink

      Olá Sergio,

      Se entendi bem a sua dúvida, basta centralizar o conteúdo também, com text-align.

  46. Posted 8 de fevereiro de 2012 at 17:21 | Permalink

    Bem bacana seu post, eu só queria tirar uma dúvida, como faço para deixar a div pai centralizada e as demais divs, como topo, imagens, textos, todas acompanhando esta div pai, como a do seu blog, o fundo cinza e o site no meio, se vc ver no meu site está centralizado a esquerda……tenho um projeto que o cliente quer parecido com o seu blog, um fundo…e o site centralizado com todo conteúdo dentro

    Obrigado pela sua atenção

    Abs

    • Posted 22 de fevereiro de 2012 at 18:02 | Permalink

      Olá Sergio,

      Se entendi bem a sua dúvida, basta centralizar o conteúdo também, com text-align.

  47. Posted 13 de fevereiro de 2012 at 18:22 | Permalink

    Boa tarde! Não estou conseguindo encontrar essa ” ” pra colar o texto HTML e conseguir colocar um Banner no meu site, pode me ajudar? Obridado!!!

  48. Posted 13 de fevereiro de 2012 at 18:22 | Permalink

    Boa tarde! Não estou conseguindo encontrar essa ” ” pra colar o texto HTML e conseguir colocar um Banner no meu site, pode me ajudar? Obridado!!!

  49. Posted 21 de fevereiro de 2012 at 13:06 | Permalink

    Entao se esta tecnica for testado em celular será que vai ficar centralizado.

    porque nos dias de hoje muitos já utiliza o celular para acesso a internet.

    obrigo pela dica.

    • Posted 22 de fevereiro de 2012 at 17:57 | Permalink

      Olá Alex,

      Para celular é recomendado a utilização do margin: 0 auto; pois funciona melhor,

  50. Posted 21 de fevereiro de 2012 at 13:06 | Permalink

    Entao se esta tecnica for testado em celular será que vai ficar centralizado.

    porque nos dias de hoje muitos já utiliza o celular para acesso a internet.

    obrigo pela dica.

    • Posted 22 de fevereiro de 2012 at 17:57 | Permalink

      Olá Alex,

      Para celular é recomendado a utilização do margin: 0 auto; pois funciona melhor,

  51. jardel
    Posted 26 de abril de 2012 at 18:06 | Permalink

    Mas encontrei um problema aí nesse modo de centralizar.
    Quando centralizo o bloco no meio vertical acontece o seguinte problema: se o browser estiver com um tamanho menor que a resolução do meu bloco, ele simplesmente nao me mostra o topo.
    Fica visivel, somente o centro do bloco no navegador.

    existe alguma forma de resolver este probleminha???

  52. jardel
    Posted 26 de abril de 2012 at 18:06 | Permalink

    Mas encontrei um problema aí nesse modo de centralizar.
    Quando centralizo o bloco no meio vertical acontece o seguinte problema: se o browser estiver com um tamanho menor que a resolução do meu bloco, ele simplesmente nao me mostra o topo.
    Fica visivel, somente o centro do bloco no navegador.

    existe alguma forma de resolver este probleminha???

  53. Erikson
    Posted 28 de abril de 2012 at 16:02 | Permalink

    Obrigado e parabens, só tem um probleminha no navegador Firefox apareceu normal já o Interne Explorer não aparece os textos o que pode ser? apliquei no arquivo PHP

  54. Erikson
    Posted 28 de abril de 2012 at 16:02 | Permalink

    Obrigado e parabens, só tem um probleminha no navegador Firefox apareceu normal já o Interne Explorer não aparece os textos o que pode ser? apliquei no arquivo PHP

  55. Roberta de Oliveira
    Posted 30 de abril de 2012 at 18:32 | Permalink

    Gostaria de saber como eu alinho tudo no meio…no HTML e alinhar pra abrir em qualquer pc. Tenho uma frase em cima, 2 HR’s a imagem no meio, 2 HR’s denovo e mais uma frase. Como alinho tudo isso no meio? Obrigada

  56. Roberta de Oliveira
    Posted 30 de abril de 2012 at 18:32 | Permalink

    Gostaria de saber como eu alinho tudo no meio…no HTML e alinhar pra abrir em qualquer pc. Tenho uma frase em cima, 2 HR’s a imagem no meio, 2 HR’s denovo e mais uma frase. Como alinho tudo isso no meio? Obrigada

  57. Posted 5 de maio de 2012 at 12:49 | Permalink

    Muito bom!!!! resolveu o problema, espero que continue centralizando, porque esse IE so da trabalho….rs
    Obrigado!

  58. Posted 5 de maio de 2012 at 12:49 | Permalink

    Muito bom!!!! resolveu o problema, espero que continue centralizando, porque esse IE so da trabalho….rs
    Obrigado!

  59. Marco
    Posted 26 de julho de 2012 at 02:15 | Permalink

    Bacana a dica!
    Mas eu estou criando um site, e tenho a seguinte estrutura de divs:

    A questão é que quero que o div MEIO fique centralizada VERTICALMENTE na div CONTENT, ou seja, se o usuário alterar o tamanho da tela, ela sempre ficará no meio da CONTENT.
    Não consegui usar seu código, pois na div CONTENT não estou usando width em px e sim em %.

    O CSS da div MEIO é o seguinte:
    #meio{
    width:100%;
    position:absolute;
    height:310px;
    background-image:url(faixa_meio.png);
    background-position:center;
    margin-top:5%;
    }

    Usei o margin-top: 5%, pq foi o que mais ficou próximo do que eu quero.

    Se puder me ajudar, ficarei agradecido!

    Abraçoo

    • Posted 27 de julho de 2012 at 11:26 | Permalink

      O alinhamento vertical ainda é meio problemático no CSS, recomendo que você procure um Javascript de centralização, vai facilitar sua vida e com certeza será cross-browser

  60. Marco
    Posted 26 de julho de 2012 at 02:15 | Permalink

    Bacana a dica!
    Mas eu estou criando um site, e tenho a seguinte estrutura de divs:

    A questão é que quero que o div MEIO fique centralizada VERTICALMENTE na div CONTENT, ou seja, se o usuário alterar o tamanho da tela, ela sempre ficará no meio da CONTENT.
    Não consegui usar seu código, pois na div CONTENT não estou usando width em px e sim em %.

    O CSS da div MEIO é o seguinte:
    #meio{
    width:100%;
    position:absolute;
    height:310px;
    background-image:url(faixa_meio.png);
    background-position:center;
    margin-top:5%;
    }

    Usei o margin-top: 5%, pq foi o que mais ficou próximo do que eu quero.

    Se puder me ajudar, ficarei agradecido!

    Abraçoo

    • Posted 27 de julho de 2012 at 11:26 | Permalink

      O alinhamento vertical ainda é meio problemático no CSS, recomendo que você procure um Javascript de centralização, vai facilitar sua vida e com certeza será cross-browser

  61. jardel
    Posted 4 de outubro de 2012 at 06:22 | Permalink

    eu testei aqui mas não está funcionando para o IE 6.

  62. jardel
    Posted 4 de outubro de 2012 at 06:22 | Permalink

    eu testei aqui mas não está funcionando para o IE 6.

  63. Posted 19 de outubro de 2012 at 18:45 | Permalink

    Muito bom o post!
    É o único lugar que encontrei o que precisava. Funcionou no Firefox, Chrome e IE (o único que dava problema da forma que eu fazia).

  64. Posted 19 de outubro de 2012 at 18:45 | Permalink

    Muito bom o post!
    É o único lugar que encontrei o que precisava. Funcionou no Firefox, Chrome e IE (o único que dava problema da forma que eu fazia).

  65. CASSIO
    Posted 8 de dezembro de 2012 at 19:59 | Permalink

    OI VÉI EU QUERIA TIRA UMA DUVIDA COMO COLOCAR UMA IMAGEM DE FUNDO NO MEU SITE NO TAMANHO CERTO DO NAVEGADOR, SEM REPETIÇÕES….OBS: EU TOU CRIANDO UM SITE SIMPLES NO NOTEPAD ++ SÓ TOU USANDO CODIGOS HTML
    TA ASSIM MEU BODY=

    AJUDAR AI VÉI

  66. CASSIO
    Posted 8 de dezembro de 2012 at 19:59 | Permalink

    OI VÉI EU QUERIA TIRA UMA DUVIDA COMO COLOCAR UMA IMAGEM DE FUNDO NO MEU SITE NO TAMANHO CERTO DO NAVEGADOR, SEM REPETIÇÕES….OBS: EU TOU CRIANDO UM SITE SIMPLES NO NOTEPAD ++ SÓ TOU USANDO CODIGOS HTML
    TA ASSIM MEU BODY=

    AJUDAR AI VÉI

  67. adriano
    Posted 18 de dezembro de 2012 at 11:24 | Permalink

    Olá, muito boa a resolução. Ajudou bastante, bem explicado. Obrigado.

  68. adriano
    Posted 18 de dezembro de 2012 at 11:24 | Permalink

    Olá, muito boa a resolução. Ajudou bastante, bem explicado. Obrigado.

  69. thales lagares
    Posted 12 de abril de 2013 at 10:43 | Permalink

    meu muito boa essa técnica porem eu consegui centralizar ,mas porem no top ela passa da tela e não consigo enxerga os conteudo dentro do meu site

  70. thales lagares
    Posted 12 de abril de 2013 at 10:43 | Permalink

    meu muito boa essa técnica porem eu consegui centralizar ,mas porem no top ela passa da tela e não consigo enxerga os conteudo dentro do meu site

  71. Ivan Guimarães
    Posted 25 de abril de 2013 at 19:14 | Permalink

    Cara você acabo de garanti meu emprego, vlw msm tava tentando de tudo mas nao conssegui arruma isso,
    eu quero po um link q quando voc clica nele aparece uma DIV na frente de tudo centralizada so q ai ela tem q estar com “position: absolute” e sempre q eu punha essa propriedade nao conssegui centraliza ela com “magin: auto”, mas essa tecnica sua resolveu meu problema.
    Vlw cara te devo uma!

  72. Ivan Guimarães
    Posted 25 de abril de 2013 at 19:14 | Permalink

    Cara você acabo de garanti meu emprego, vlw msm tava tentando de tudo mas nao conssegui arruma isso,
    eu quero po um link q quando voc clica nele aparece uma DIV na frente de tudo centralizada so q ai ela tem q estar com “position: absolute” e sempre q eu punha essa propriedade nao conssegui centraliza ela com “magin: auto”, mas essa tecnica sua resolveu meu problema.
    Vlw cara te devo uma!

  73. rustera
    Posted 29 de abril de 2013 at 18:53 | Permalink

    o código abaixo funciona perfeitamente no ie, mas no chrome e Firefox o alinhamento vertical não funciona, fica colado no topo do navegador

    body{
    margin: 0px;
    background-color: #666666;
    }
    #flash {
    position: absolute;
    width: 850px;
    height: 450px;
    margin-top: -225px;
    margin-left: -425px;
    top: 50%;
    left: 50%;}

    Não consigo achar o erro!

  74. rustera
    Posted 29 de abril de 2013 at 18:53 | Permalink

    o código abaixo funciona perfeitamente no ie, mas no chrome e Firefox o alinhamento vertical não funciona, fica colado no topo do navegador

    body{
    margin: 0px;
    background-color: #666666;
    }
    #flash {
    position: absolute;
    width: 850px;
    height: 450px;
    margin-top: -225px;
    margin-left: -425px;
    top: 50%;
    left: 50%;}

    Não consigo achar o erro!

  75. Posted 4 de julho de 2013 at 17:56 | Permalink

    Muito obrigada!! Precisei fazer algumas adaptações para a minha necessidade mas deu super certo! Me ajudou muito!!!

  76. Posted 4 de julho de 2013 at 17:56 | Permalink

    Muito obrigada!! Precisei fazer algumas adaptações para a minha necessidade mas deu super certo! Me ajudou muito!!!

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>