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?

— 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

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

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

<div class="outer">
    <div class="inner">I'm always centered<br/>doesn't matter how much text, height or width i have.<br/>The dimensions or my parent are irrelevant as well</div>
</div>

Expandir snippet

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:

Trabalhe sem ter que saber a altura / largura dos pais.
Trabalhe em resposta.
Trabalhe no eixo X ou Y. Ou ambos, como no meu exemplo.
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

.relative {
  width: 275px;
  height: 200px;
  background: royalblue;
  color: white;
  margin: auto;
  position: relative;
}

.absolute-block {
  position: absolute;
  height: 36px;
  background: orange;
  padding: 0px 10px;
  bottom: -5%;
  border: 1px solid black;
}

.center-text {
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 1px 2px 10px 2px rgba(0, 0, 0, 0.3);
}

<div class="relative center-text">
  Relative Block
  <div class="absolute-block center-text">Absolute Block</div>
</div>

Expandir snippet

— 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

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