Como centralizar o elemento absolutamente posicionado em div?

Eu preciso colocar um elemento div (com position:absolute; ) no centro da minha janela. Mas estou tendo problemas para fazer isso, porque a largura é desconhecida .

Eu tentei isso. Mas precisa ser ajustado, pois a largura é responsiva.

 .center { left: 50%; bottom:5px; } 

Alguma ideia?

  
I am some centered shrink-to-fit content!
tum te tum

Isso funciona para mim:

 #content { position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; width: 100px; /* Need a specific value to work */ } 
  
I'm the content

Solução Responsiva

Aqui está uma boa solução para design responsivo ou dimensões desconhecidas em geral, se você não precisa suportar o IE8 e inferior.

 .centered-axis-x { position: absolute; left: 50%; transform: translate(-50%, 0); } 
 .outer { position: relative; /* or absolute */ /* unnecessary styling properties */ margin: 5%; width: 80%; height: 500px; border: 1px solid red; } .inner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); /* unnecessary styling properties */ max-width: 50%; text-align: center; border: 1px solid blue; } 
 
I'm always centered
doesn't matter how much text, height or width i have.
The dimensions or my parent are irrelevant as well

Post muito legal .. Só queria adicionar se alguém quiser fazer isso com tag div única então aqui a saída:

Tomando width como 900px .

 #styleName { position: absolute; left: 50%; width: 900px; margin-left: -450px; } 

Neste caso, deve-se saber a width antemão.

Centro Absoluto

HTML:

 

CSS:

 .parent { position: relative; } .child { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } 

Demonstração: http://jsbin.com/rexuk/2/

Testado no Google Chrome, Firefox e IE8

Espero que isto ajude 🙂

este trabalho para vertical e horizontal

  #myContent{ position: absolute; left: 0; right: 0; top:0; bottom:0; margin: auto; } 

e se você quiser fazer o centro do elemento pai, defina a posição do parente

  #parentElement{ position:relative } 

editar:

  • para o centro vertical alinhar a altura definida ao seu elemento. obrigado a @Raul

  • se você quiser fazer o centro do elemento pai, defina a posição do pai como relativo

Procurando por uma solução, obtive respostas acima e consegui fazer o conteúdo centrado com a resposta de Matthias Weiler, mas usando o text-align.

 #content{ position:absolute; left:0; right:0; text-align: center; } 

Trabalhou com o Chrome e o Firefox.

Eu entendo que esta pergunta já tem algumas respostas, mas eu nunca encontrei uma solução que funcionasse em quase todas as classs que também faz sentido e é elegante, então aqui está minha opinião depois de ajustar um monte:

 .container { position: relative; } .container .cat-link { position: absolute; left: 50%; top: 50%; transform: translate3d(-50%,-50%,0); z-index: 100; text-transform: uppercase; /* Forces CSS to treat this as text, not a texture, so no more blurry bugs */ background-color: white; } .color-block { height: 250px; width: 100%; background-color: green; } 
  

Tanto quanto sei, isso é impossível de alcançar para uma largura desconhecida.

Você poderia – se isso funciona no seu cenário – posicionar absolutamente um elemento invisível com 100% de largura e altura, e ter o elemento centralizado lá usando margin: auto e possivelmente vertical-align. Caso contrário, você precisará do Javascript para fazer isso.

Eu gostaria de adicionar à resposta de @ bobince:

  
I am some centered shrink-to-fit content!
tum te tum

Aprimorado: /// Isso faz com que a barra de rolagem horizontal não apareça com elementos grandes na div centralizada.

  
I am some centered shrink-to-fit content!
tum te tum

Aqui está um plugin jQuery útil para fazer isso. Encontrado aqui . Eu não acho que é possível apenas com CSS

 /** * @author: Suissa * @name: Absolute Center * @date: 2007-10-09 */ jQuery.fn.center = function() { return this.each(function(){ var el = $(this); var h = el.height(); var w = el.width(); var w_box = $(window).width(); var h_box = $(window).height(); var w_total = (w_box - w)/2; //400 var h_total = (h_box - h)/2; var css = {"position": 'absolute', "left": w_total+"px", "top": h_total+"px"}; el.css(css) }); }; 

Meu método de centralização preferido:

 position: absolute; margin: auto; width: x% 
  • posicionamento absoluto do elemento de bloco
  • margem auto
  • mesma esquerda / direita, superior / inferior

JSFiddle aqui

versão sass / bússola da Solução Responsiva acima:

 #content { position: absolute; left: 50%; top: 50%; @include vendor(transform, translate(-50%, -50%)); } 

Isso funcionou para mim:

 

Eu sei que já dei uma resposta, e minha resposta anterior, juntamente com outras dadas, funciona muito bem. Mas eu usei isso no passado e funciona melhor em certos navegadores e em determinadas situações. Então eu pensei que id dar essa resposta também. Eu não “editei” minha resposta anterior e a adicionei porque acho que essa é uma resposta totalmente separada e as duas que forneci não estão relacionadas.

HTML:

 

CSS:

 #parent { display: table; } #child { display: table-cell; vertical-align: middle; } 
 #container { position: relative; width: 100%; float:left } #container .item { width: 50%; position: absolute; margin: auto; left: 0; right: 0; } 

Funciona em qualquer largura aleatória desconhecida do elemento de posicionamento absoluto que você deseja ter no centro do seu elemento de contêiner.

Demonstração

 
.container { position: relative; width: 100%; } .box { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; }

HTML:

 
content

CSS:

 .wrapper { position: relative; width: 200px; height: 200px; background: #ddd; } .inner { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 100px; height: 100px; background: #ccc; } 

Isto e mais exemplos aqui

HTML

 

CSS

 #parent { position: relative; } #centered-child { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto auto; } 

http://jsfiddle.net/f51rptfy/

Este é um truque que eu descobri para obter um DIV para flutuar exatamente no centro de uma página. Realmente feio é claro, mas funciona em todos

Pontos e traços

 
Perfectly Centered Content

Limpador

Uau que cinco anos voaram, não foi?

 

Stays in the Middle

Você pode colocar a imagem em um div e adicionar um div id e ter o CSS para esse div ter um text-align:center

HTML:

 
http://sofpt.miximages.com/css/

CSS:

 #intro_img { text-align:center; } 
 #content { margin:0 auto; display:table; float:none;} 
  
I'm the content

Uma abordagem simples que funcionou para eu centralizar horizontalmente um bloco de largura desconhecida:

 

 #wrapper { position: absolute; width: 100%; text-align: center; } #block { display: inline-block; } 

Uma propriedade de alinhamento de texto pode ser adicionada ao conjunto de regras #block para alinhar seu conteúdo independentemente do alinhamento do bloco.

Isso funcionou em versões recentes do Firefox, Chrome, IE, Edge e Safari.

Eu usei uma solução similar:

 #styleName { position: absolute; margin-left: -"X"px; } 

Onde “X” é metade da largura de um div que eu quero exibir. Funciona bem para mim em todos os navegadores.

Tente não usar o lado negro do CSS. Evite usar valores negativos para margens. Eu sei que às vezes você é forçado a fazer coisas terríveis como uma margin-left: -450px , mas provavelmente você poderia fazer algo como right: 450px . É o meu jeito de trabalhar.