Como centralizar o elemento absolutamente posicionado em div?

1078

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

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

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

Alguma ideia?

css css-position center absolute Ish
fonte
4
Você tem um exemplo em exemplos de centros absolutos que podem ser generalizados em diferentes situações.
precisa saber é o seguinte
2
Existe uma resposta melhor para esta pergunta em stackoverflow.com/questions/17976995/…
Andrew Swift

Respostas:

1333 

<body>
  <div style="position: absolute; left: 50%;">
    <div style="position: relative; left: -50%; border: dotted red 1px;">
      I am some centered shrink-to-fit content! <br />
      tum te tum
    </div>
  </div>
</body>
Expandir snippet

bobince
fonte
76
Impressionante. Trabalhou para mim! Um problema que tive: a imagem que eu estava centralizando era bastante grande, fazendo com que a div externa fosse além da borda direita da página e causasse rolagem horizontal. Eu troquei a "esquerda" propriedade CSS de "direita", e até agora ele funciona melhor, pois vai ao longo da borda esquerda da tela doesnt causa rolagem
BoomShaka
que se o usuário tenha sido deslocada para o baixo da página, aparece overylay no topo, você acha que vai ser uma boa idéia para usar jQuery para emissão correção de rolagem
PUG
1
uma solução para o problema de rolagem pode ser, position: fixede se a altura for desconhecida da sobreposição, as barras de rolagem da sobreposição precisarão ser implementadas
PUG
3
Há um problema menor que encontrei usando essa técnica. Como a div externa ocupa 50% da tela, algumas mudanças ocorrem quando o texto é maior que o tamanho da tela de 50%. Resolvi isso definindo a div externa como "width: 100%" e removendo a propriedade esquerda. Para a div interna, simplesmente defino meu alinhamento de texto no centro. Isso resolve o problema.
Nicky L.
3
A altura da porcentagem é relativa ao bloco que contém, neste caso <html>. Mas o <html>elemento não tem um heightespecificado, portanto ocupa a altura de todo o conteúdo do documento, o que não é nada porque o único conteúdo está absolutamente posicionado (retirado do fluxo de conteúdo). Adicionar height: 100%ao <html>elemento faz a diferença para isso.
22914
1801

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 */
}
<body>
  <div>
    <div id="content">
      I'm the content
    </div>
  </div>
</body>
Expandir snippet

Matthias Weiler
fonte
36
Eu só quero dizer que as margens negativas são CSS perfeitamente válidas e não devem ser vistas como um "truque sujo". As margens negativas são mencionadas na especificação do modelo de caixa do W3C. Alguns indivíduos parecem arbitrariamente decidir que é um hack porque eles a) os ignoram ou b) os estão usando para corrigir seu CSS incorreto.
Joseph Ravenwolfe
58
a largura da div a ser centralizada deve ser definida - não funcionará automaticamente com, digamos, um botão com texto.
Stefan
2
@ Josué Isso centraliza apenas horizontalmente, não verticalmente como a outra resposta.
ygoe 31/01
3
Prefiro esta solução, pois não aumenta o tamanho da janela de exibição.
iceydee
13
Para suporte entre navegadores: widthdeve ser definido como um valor específico para que isso funcione. autoe 100%não centralizará o elemento. display: block;é uma obrigação. position: absolute;NÃO é uma obrigação. Todos os valores irão funcionar. O elemento pai positiondeve ser definido como algo diferente de static. Definir lefte rightpara 0é desnecessário. margin-left: auto; margin-right: auto;fará o trabalho.
Onur Yıldırım
767

Solução responsiva

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

.centered-axis-x {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

Mostrar snippet de código

Aqui está um JS Fiddle

A pista é que isso left: 50%é relativo aos pais enquanto otranslate transformação é relativa aos elementos largura / altura.

Dessa forma, você tem um elemento perfeitamente centralizado, com uma largura flexível no filho e no pai. Bônus: isso funciona mesmo se a criança for maior que o pai.

Você também pode centralizá-lo verticalmente com isso (e, novamente, a largura e a altura do pai e do filho podem ser totalmente flexíveis (e / ou desconhecidas)):

.centered-axis-xy {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

Lembre-se de que também pode ser necessário transformprefixar o fornecedor. Por exemplo-webkit-transform: translate(-50%,-50%);

ProblemsOfSumit
fonte
26
Com o suporte ao IE7 não mais necessário, essa deve ser a solução de fato. Essa solução é melhor que a técnica left: 0 / right: 0, pois isso torna os elementos em largura total, enquanto isso mantém a largura e funciona em elementos de larguras desconhecidas.
aleemb
51
De longe a melhor resposta, isso funciona se a caixa em que a div está contida for menor que a criança.
Case
2
@ChadJohnson, é claro que sim. Tente com o webkit-prefixo, como sugeri.
ProblemsOfSumit
2
Ah, eu perdi sua nota sobre o -webkit. Impressionante.
Chad Johnson
3
transform: translateparece tornar position: fixedinutilizável em crianças. A resposta aceita funciona melhor neste caso.
Dmvianna
49

Realmente bom post .. Só queria adicionar se alguém quiser fazê-lo com tag div única, então aqui a saída:

Tomando widthcomo 900px.

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

Nesse caso, deve-se conhecer o widthantemão.

pratikabu
fonte
26
"because the width is unknown"... isso não responder à pergunta
Michel Ayres
15
oi @ Michel, na verdade, quando você pesquisa no Google algo relacionado à centralização da div absoluta, esse link é o primeiro. É por isso que eu adicionei esta solução, no caso de alguém como eu, está em busca da solução acima .. :)
pratikabu
1
Não é muito útil para design responsivo, mas funcionou para mim até que eu comecei a fazer designs responsivos. Esta é uma resposta válida para centralizar elementos de largura conhecidos absolutamente posicionados .
Sean Kendle
36

Absolute Center

HTML:

<div class="parent">
  <div class="child">
    <!-- content -->
  </div>
</div>

CSS: 

.parent {
  position: relative;
}

.child {
  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  margin: auto;
}

Demo: http://jsbin.com/rexuk/2/

Testado no Google Chrome, Firefox e IE8

Espero que isto ajude :)

Ijas Ameenudeen
fonte
Isso não funciona, por favor verifique o seguinte codepen codepen.io/anon/pen/YqWxjJ
Mark
1
Desculpe, eu acho que isso vai funcionar, mas você precisa incluir uma altura fixa e largura codepen.io/anon/pen/WwxEYQ
Mark
31

este trabalho para vertical e horizontal 

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

e se você deseja tornar o elemento central do pai, defina a posição do pai em relação

 #parentElement{
      position:relative
  }

editar:

  • para o centro vertical, alinhe a altura definida ao seu elemento. graças a @Raul

  • se você deseja tornar o elemento central do pai, defina a posição do pai como relativa

Mohsen Abdollahi
fonte
2
Eu acho que você precisa adicionar altura para a vertical funcionar.
Raul
Parece que essas posições estão no centro da página, não no centro de outro elemento.
Günter Zöchbauer 18/11/2015
1
@ GünterZöchbauer sim, se você deseja tornar o elemento centro do pai, defina a posição do pai em relação.
Mohsen Abdollahi
20

Procurando uma solução, obtive respostas acima e poderia tornar o conteúdo centrado na resposta de Matthias Weiler, mas usando o alinhamento de texto.

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

Trabalhou com chrome e Firefox.

cavila
fonte
5
Eu acho que você não precisa do "text-align: center"
Tobias
Isso corrigiu meu problema aqui . Obrigado!
Volomike
Eu precisava do "text-align: center", e isso funcionou onde a solução sugerida pelo @ProblemsOfSumit não funcionou, pois fez com que meu texto fosse quebrado.
Nat
19

Se você também precisar centralizar horizontal e verticalmente:

left: 50%;
top: 50%;
transform: translate(-50%, -50%);
michal.jakubeczy
fonte
correção muito legal obrigado
Stanley Bateswar 25/03
15

** SOLUÇÃO RESPONSIVA **

Assumindo o elemento na div, é outra div ...

esta solução funciona bem

<div class="container">
  <div class="center"></div>
</div>

o contêiner pode ter qualquer tamanho (deve ser relativo à posição)

.container {
position: relative;/*important*/
width: 200px;/*any width*/
height: 200px;/*any height*/
background: red;
}

O elemento ( div ) também pode ser de qualquer tamanho (deve ser menor que o contêiner )

.center {
position: absolute;/*important*/
top: 50%;/*position Y halfway in*/
left: 50%;/*position X halfway in*/
transform: translate(-50%,-50%);/*move it halfway back(x,y)*/
width: 100px;/*any width*/
height: 100px;/*any height*/
background: blue;
}

O resultado será semelhante a este. Execute o trecho de código

.container {
	position: relative;
	width: 200px;
	height: 200px;
	background: red;
}

.center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100px;
	height: 100px;
	background: blue;
}
<div class="container">
	<div class="center"></div>
</div>
Expandir snippet

Eu achei muito útil

RealMJDev
fonte
1
gênio. por que o outro não veio com isso.
mesqueeb
Obrigado, feliz codificação
RealMJDev
13

Esta é uma mistura de outras respostas, que funcionaram para nós:

.el {
   position: absolute;
   top: 50%;
   margin: auto;
   transform: translate(-50%, -50%);
}
Crashalot
fonte
Correção agradável graças cara!
Stanley Bateswar
12

Entendo que esta pergunta já tem algumas respostas, mas nunca encontrei uma solução que funcionasse em quase todas as classes 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;
}
<div class="container">
  <a class="cat-link" href="">Category</a>
  <div class="color-block"></div>
</div>
Expandir snippet

O que isso está dizendo é fornecer a top: 50%e a left: 50%e depois transformar (criar espaço) no eixo X / Y para o-50% valor, em um sentido "crie um espaço de espelho".

Dessa forma, isso cria um espaço igual em todos os 4 pontos de uma div, que é sempre uma caixa (tem 4 lados).

Isso vai:

  1. Trabalhe sem ter que saber a altura / largura dos pais.
  2. Trabalhe em resposta.
  3. Trabalhe no eixo X ou Y. Ou ambos, como no meu exemplo.
  4. Não posso inventar uma situação em que não funcione.
Daniel Moss
fonte
Informe-me se você encontrar uma situação em que isso não funcione para que eu possa editar a pergunta com sua opinião.
Daniel Moss
transformar / traduzir irá causas safari para processar texto desfocada em certa escala
James Tan
@DanielMoss algum motivo para não usar translate(-50%,-50%);?
precisa saber é o seguinte
12

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

Demo

<div class="container">
  <div class="box">
    <img src="https://picsum.photos/200/300/?random" alt="">
  </div>
</div>

.container {
  position: relative;
  width: 100%;
}

.box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
lowtechsun
fonte
9

O Flex pode ser usado para centralizar div absoluto posicionado.

display:flex;
align-items:center;
justify-content:center;

Mostrar snippet de código

Dhaval Jardosh
fonte
na minha tela -Firefox 68.x, ele simplesmente não se alinha, o bloco absoluto aparece na parte inferior do bloco relativo
Webwoman
Você pode tentar isso display: -webkit-flex;?
Dhaval Jardosh 17/03
7

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

Você pode - se isso funcionar no seu cenário - posicionar absolutamente um elemento invisível com 100% de largura e altura e ter o elemento centralizado usando a margem: auto e possivelmente alinhamento vertical. Caso contrário, você precisará de Javascript para fazer isso.

Pekka
fonte
+1 para a coisa "margem: automática". Eu tentei isso antes para centralizar horizontalmente uma div usando a linha "margin: 0 auto" - o "0" se aplica às margens verticais e o "auto" à horizontal. Acho que é isso que o StackOverflow usa para a div de nível superior para obter as duas bordas brancas grossas nas laterais da página. No entanto, a página W3Schools na margem CSS declara o valor automático de que "O resultado disso depende do navegador" - eu não o experimentei pessoalmente em muitos navegadores diferentes, por isso não posso comentar sobre esse ponto (mas que, obviamente, faz o truque em alguns deles)
Steg
1
é possível uma largura (e altura) desconhecida se o IE8 não for um problema. Veja minha resposta para detalhes.
ProblemsOfSumit
7

Gostaria de adicionar à resposta de @ bobince:

<body>
    <div style="position: absolute; left: 50%;">
        <div style="position: relative; left: -50%; border: dotted red 1px;">
            I am some centered shrink-to-fit content! <br />
            tum te tum
        </div>
    </div>
</body>

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

<body>
    <div style="width:100%; position: absolute; overflow:hidden;">
        <div style="position:fixed; left: 50%;">
            <div style="position: relative; left: -50%; border: dotted red 1px;">
                I am some centered shrink-to-fit content! <br />
                tum te tum
            </div>
        </div>
    </div>
</body>
Frasco
fonte
6

Heres 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)
    });
};
Ben Shelock
fonte
esta é a melhor maneira e, especialmente, com design repetitivo.
M4tm4t 18/10/12
Seria trivial se jQuery foi usado em qualquer caso
Código Whisperer
8
este não é o melhor caminho. É sempre melhor usar CSS sempre que possível. É possível centralizar um DIV com CSS em todos os eixos e também para páginas responsivas. Não há necessidade de JavaScript!
ProblemsOfSumit
1
@yckart e, neste caso, a ferramenta é CSS.
problema foi
5

versão sass / compass da Solução Responsiva acima:

#content {
  position: absolute;
  left: 50%;
  top: 50%;
  @include vendor(transform, translate(-50%, -50%));
}
Adam Spence
fonte
4
transform: translate(-50%, -50%)torna o texto e todo o outro conteúdo embaçados no OS X usando navegadores da Webkit. keithclark.co.uk/articles/gpu-text-rendering-in-webkit
Yasha
Basta usar o tipo de antialiasing que você gosta -webkit-font-smoothing: antialiased;que eu colhi no artigo que você postou btw!
Adam Spence
4

Meu método de centralização preferido:

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

JSFiddle aqui

vp_arth
fonte
4

Isso funcionou para mim:

<div class="container><p>My text</p></div>

.container{
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
Alan
fonte
É a resposta de @Matthias Weiler 5 anos depois.
aloisdg movendo-se para codidact.com 19/11
3

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 determinados navegadores e em determinadas situações. Então eu pensei em dar essa resposta também. Não "editei" minha resposta anterior e a adicionei porque sinto que essa é uma resposta totalmente separada e as duas que forneci não são relacionadas.

HTML:

<div id='parent'>
  <div id='child'></div>
</div>

CSS:

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

HTML

<div id='parent'>
  <div id='centered-child'></div>
</div>

CSS

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

http://jsfiddle.net/f51rptfy/

Dustin Poissant
fonte
2

Esta solução funciona se o elemento tiver widtheheight 

.wrapper {
  width: 300px;
  height: 200px;
  background-color: tomato;
  position: relative;
}

.content {
  width: 100px;
  height: 100px;
  background-color: deepskyblue;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
<div class="wrapper">
  <div class="content"></div>
</div>
Expandir snippet

Mo.
fonte
2

a solução desta questão não funcionou para o meu caso. Estou fazendo uma legenda para algumas imagens e resolvi usando isso

top: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;

display: flex;
align-items: center;

figure {
  position: relative;
  width: 325px;
  display: block
}


figcaption{
   
    position: absolute;
    background: #FFF;
    width: 120px;
    padding: 20px;

    -webkit-box-shadow: 0 0 30px grey;
    box-shadow: 0 0 30px grey;
    border-radius: 3px;
    display: block;
    
    top: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    
    display: flex;
    align-items: center;
}
<figure>
  <img  src="https://picsum.photos/325/600">
  <figcaption> 
			But as much
    </figcaption>
                
</figure>
Expandir snippet

Marcogomesr
fonte
1

HTML:

<div class="wrapper">
    <div class="inner">
        content
    </div>
</div>

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;
}

Este e mais exemplos aqui


fonte
1

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

Pontos e traços

<div style="border: 5 dashed red;position:fixed;top:0;bottom:0;left:0;right:0;padding:5">
    <table style="position:fixed;" width="100%" height="100%">
        <tr>
            <td style="width:50%"></td>
            <td style="text-align:center">
                <div style="width:200;border: 5 dashed green;padding:10">
                    Perfectly Centered Content
                </div>
            </td>
            <td style="width:50%"></td>
        </tr>
    </table>
</div>

Limpador

Uau, que cinco anos voaram, não foi?

<div style="position:fixed;top:0px;bottom:0px;left:0px;right:0px;padding:5px">
<table style="position:fixed" width="100%" height="100%">
    <tr>
        <td style="width:50%"></td>
        <td style="text-align:center">
            <div style="padding:10px">
                <img src="Happy.PM.png">
                <h2>Stays in the Middle</h2>
            </div>
        </td>
        <td style="width:50%"></td>
    </tr>
</table>

Mr. B
fonte
1 
.center {
  position: absolute
  left: 50%;
  bottom: 5px;
}

.center:before {
    content: '';
    display: inline-block;
    margin-left: -50%;
}
AndreyP
fonte
0

Você pode colocar a imagem em uma div, adicionar um ID de div e fazer com que o CSS dessa div tenha um text-align:center

HTML:

<div id="intro_img">

    <img src="???" alt="???">

</div>

CSS:

#intro_img {
    text-align:center;
}
Dworvin Vonstrangle
fonte
0 

#content { margin:0 auto; display:table; float:none;}
<body>
  <div>
    <div id="content">
      I'm the content
    </div>
  </div>
</body>
Expandir snippet

amit bende
fonte
0

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

<div id="wrapper">
  <div id="block"></div>
</div>
#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 nas versões recentes do Firefox, Chrome, IE, Edge e Safari.

Terence Bandoian
fonte