Como centralizar um elemento "position: absolute"

676

Estou tendo um problema ao centralizar um elemento com o atributo positiondefinido como absolute. Alguém sabe por que as imagens não estão centralizadas?

body {
  text-align: center;
}

#slideshowWrapper {
  margin-top: 50px;
  text-align: center;
}

ul#slideshow {
  list-style: none;
  position: relative;
  margin: auto;
}

ul#slideshow li {
  position: absolute;
}

ul#slideshow li img {
  border: 1px solid #ccc;
  padding: 4px;
  height: 450px;
}
<body>
  <div id="slideshowWrapper">
    <ul id="slideshow">
      <li><img src="img/dummy1.JPG" alt="Dummy 1" /></li>
      <li><img src="img/piano_unlicened.JPG" alt="Dummy 2" /></li>
    </ul>
  </div>
</body>
Expandir snippet

html css css-position centering user1098278
fonte
3
você precisa dar ul # slideshow uma largura fixa ...
ptriek

Respostas:

1190

Se você definiu uma largura, pode usar:

position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
baaroz
fonte
21
Esta é uma resposta muito mais limpa do que o resto! Existem advertências?
Sbichenko
8
Resposta mais inteligente. Acabei de verificar e funciona em todos os navegadores. Ele não funciona no IE8, mas funciona no IE> = 9
Roger
13
Certifique-se de teste no IE, esse truque não funciona se o elemento tem um 'max-width' set no IE9
aphax
33
Pessoalmente, prefiro a sintaxe "margem: 0 automática; esquerda: 0; direita: 0;"
Hector Ordonez
58
Isso simplesmente não funciona, a menos que uma largura seja definida. Pode parecer que funcione se você tiver alinhamento de texto: central no pai e não tiver um plano de fundo no elemento posicionado absoluto, mas coloque um plano de fundo nele e verá que ele está assumindo toda a largura. A resposta translateX (-50%) é a correta.
Codemonkey
584

Sem conhecer o width/ heightdo elemento 1 posicionado , ainda é possível alinhá-lo da seguinte forma:

EXEMPLO AQUI

.child {
    position: absolute;
    top: 50%;  /* position the top  edge of the element at the middle of the parent */
    left: 50%; /* position the left edge of the element at the middle of the parent */

    transform: translate(-50%, -50%); /* This is a shorthand of
                                         translateX(-50%) and translateY(-50%) */
}

Vale ressaltar que o CSS Transform é suportado no IE9 e acima . (Prefixos de fornecedor omitidos por brevidade)

Explicação

Adicionar top/ leftde 50%move a margem superior / esquerda do elemento para o meio do pai e a translate()função com o valor (negativo) de -50%move o elemento pela metade do seu tamanho. Portanto, o elemento será posicionado no meio.

Isso ocorre porque um valor percentual em top/ leftproperties é relativo à altura / largura do elemento pai (que está criando um bloco contendo).

Enquanto um valor percentual na função de transformação é relativo à largura / altura do próprio elemento (na verdade, refere-se ao tamanho da caixa delimitadora ) .translate()

Para alinhamento unidirecional, vá com translateX(-50%)ou em translateY(-50%)vez disso.

1. Um elemento com positionoutro que não static. Ou seja relative, absolute, fixedvalores.

Hashem Qolami
fonte
65
Esta deve ser a melhor resposta !!
Chris Pine
3
Fantástico! Melhor do lote!
Bhargav Ponnapalli
4
Procurei em todos os lugares uma resposta para isso e uma boa explicação. Esta é a melhor resposta por aí e uma ótima explicação também! Obrigado.
Mike
5
Centralização Horizontal: position: absolute; left: 50%; transform: translateX(-50%);, centralização vertical: position: absolute; top: 50%; transform: translateY(-50%);.
2141616
1
Só agora encontrei essa translatepropriedade, traduza o elemento pelo tamanho de si mesmo , independentemente do tamanho de seu pai.
Farzin Kanzi
185

Centrar algo absoluteposicionado é bastante complicado em CSS.

ul#slideshow li {
    position: absolute;
    left:50%;
    margin-left:-20px;

}

Mude margin-leftpara (negativo) metade da largura do elemento que você está tentando centralizar.

estante de livros
fonte
5
Ao testar esta não funciona quando as imagens são de tamanhos diferentes, e eles ainda empilhar uns sobre os outros
Ryan Gibbons
3
Muito hack-ish (como quase sempre acontece com css). Mas demais! :-)
Dr.Kameleon
1
Fiquei tentado pela esperteza de algumas outras respostas, mas apenas essa foi confiável para mim.
Chris Schiffhauer
Eu tinha o mesmo problema que o Ryan, então tentei a segunda resposta sugerida por "baaroz" e funcionou para mim !!! e suportar diferentes resoluções também, desde a minha DIV principais têm largura em% e não PX
UID
Isso não é realmente centrado. Isto é mais posicionado à direita
Artsicle
81

Div centro alinhado vertical e horizontalmente 

top: 0;
bottom: 0;
margin: auto;
position: absolute;
left: 0;
right: 0;

Nota: Os elementos devem ter largura e altura a serem definidos

Sebin Simon
fonte
1
Não sei por que isso não ganha mais votos. Funciona em todos os navegadores, incluindo navegadores móveis, até onde eu sei. Costuras mais confiáveis ​​em termos de suporte. É simples, fácil e limpo ...
David Martins
1
Esta é uma resposta melhor. Requer apenas uma div para criar e tem mais casos de uso do que chamar à esquerda: 50% ;, top: 50%; como a solução com mais de 69 votos
Ian S /
a melhor resposta até agora, quem vier aqui deve conferir!
Abdo Adel
3
O elemento também precisa de um heightconjunto para que isso funcione.
precisa saber é o seguinte
55

Um truque simples de CSS, basta adicionar:

width: 100%;
text-align: center;

Isso funciona tanto em imagens quanto em texto.

cutez7boyz
fonte
48

Se você deseja centralizar um elemento absoluto

#div {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

Se você deseja que um contêiner seja centralizado da esquerda para a direita, mas não de cima para baixo

#div {
    position:absolute;
    left:0;
    right:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

Se você deseja que um contêiner seja centralizado de cima para baixo, independentemente da esquerda para a direita

#div {
    position:absolute;
    top:0;
    bottom:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

Atualização em 15 de dezembro de 2015

Bem, eu aprendi esse outro novo truque há alguns meses atrás. Supondo que você tenha um elemento pai relativo.

Aqui vai o seu elemento absoluto.

.absolute-element { 
    position:absolute; 
    top:50%; 
    left:50%; 
    transform:translate(-50%, -50%); 
    width:50%; /* You can specify ANY width values here */ 
}

Com isso, acho que é uma resposta melhor do que minha solução antiga. Como você não precisa especificar largura E altura. Este adapta o conteúdo do próprio elemento.

Wesley Brian Lachenal
fonte
36

Para centralizar um elemento "position: absolute".

.your-element {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center; // or this ->  margin: 0 auto;
}
Vadamadafaka
fonte
32

Isso funcionou para mim:

position: absolute;
left: 50%;
transform: translateX(-50%);
Deplauda
fonte
27

para centralizar uma posição: atributo absoluto, você precisa definir à esquerda: 50% e margem esquerda: -50% da largura da div.

<!-- for horizontal -->
<style>
div.center{
 width:200px;
 left:50%;
 margin-left:-100px;
 position:absolute;
}
</style>


<body>
 <div class='center'>
  should be centered horizontaly
 </div>
</body>

para o centro vertical absoluto, você precisa fazer a mesma coisa não com a esquerda apenas com a parte superior. (OBSERVAÇÃO: o html e o corpo devem ter 100% de altura mínima;)

<!-- for vertical -->
<style>
 body,html{
  min-height:100%;
 }
 div.center{
  height:200px;
  top:50%;
  margin-top:-100px;
  position:absolute;
 }
</style>

<body>
 <div class='center'>
  should be centered verticaly
 </div>
</body>

e pode ser combinado para ambos

   <!-- for both -->
 <style>
 body,html{
  min-height:100%;
 }
 div.center{
  width:200px;
  height:50px
  left:50%;
  top:50%;
  margin-left:-100px;
  margin-top:-25px;
  position:absolute;
 }
</style>


<body>
 <div class='center'>
  should be centered
 </div>
</body>
Rednas
fonte
16 
    <div class="centered_content"> content </div>
    <style type="text/css">
    .centered_content {
       text-align: center;
       position: absolute;
       left: 0;
       right: 0;
    }
    </style>

veja a demonstração em: http://jsfiddle.net/MohammadDayeh/HrZLC/

text-align: center; trabalha com um position: absoluteelemento ao adicionarleft: 0; right: 0;

Mohammad Dayeh
fonte
2
Forneça algum tipo de comentário ou justificativa por que esse código funciona. As respostas do código serão inevitavelmente sinalizadas para exclusão.
Rayryeng 24/05
14

Quanto mais simples, melhor:

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

Em seguida, você precisa inserir sua tag img em uma tag que ostente posição: propriedade relativa, da seguinte maneira:

<div style="width:256px; height: 256px; position:relative;">
      <img src="photo.jpg"/>
</div>
Stéphane de Luca
fonte
8

provavelmente o mais curto

position:absolute;
left:0;right:0;top:0;bottom:0;
margin:0 auto;
Cris
fonte
1
Isso é incrível, mas, para centralizar vertical e horizontalmente, precisamos fazer apenas margem automática
Santosh
7

Se você não souber a largura do elemento, poderá usar este código:

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

Demonstração e rabeca: http://jsfiddle.net/wrh7a21r/

Fonte: https://stackoverflow.com/a/1777282/1136132

joseantgv
fonte
@ NabiK.AZ este exemplo é útil se você não souber a largura do elemento. No seu exemplo, você define uma largura para a div.
joseantgv
7

Ou agora você pode usar a caixa flexível com posição absoluta: 

.parent {
    position: relative;
    display: flex;
    justify-content: center;
}

.child {
    position: absolute;
}
Sebastian Thomas
fonte
isso é tão subestimado.
Siege21x em 21/03
5

insira a descrição da imagem aqui

Não tenho certeza do que você deseja realizar, mas, neste caso, apenas adicionar width: 100%;à sua ul#slideshow livontade fará o truque.

Explicação

As imgtags são elementos de bloco embutido. Isso significa que eles fluem em linha como texto, mas também têm largura e altura como elementos de bloco. No seu css, existem duas text-align: center;regras aplicadas ao <body>e ao #slideshowWrapper(o que é redundante), isso faz com que todos os elementos filho inline e inline-block sejam centralizados nos elementos de bloco mais próximos, no seu código essas são litags. Todos os elementos de bloco possuem width: 100%se eles são o fluxo estático ( position: static;), que é o padrão. O problema é que, quando você diz que as litags estão position: absolute;, você as tira do fluxo estático normal, e isso faz com que elas diminuam o tamanho para se ajustarem apenas ao conteúdo interno, ou seja, elas "perdem" suas width: 100%propriedades.

Konstantin Kalbazov
fonte
5

Usar left: calc(50% - Wpx/2);onde W é a largura do elemento funciona para mim.

Julix
fonte
Como você determina W?
Purplejacket
Ele disse "uma imagem" - idealmente, ao criar imagens para a Web, você deve criar a imagem no tamanho que a usará (em vez de redimensioná-la) para evitar peso desnecessário (se você criar uma imagem grande pequeno) ou imprecisão (se você criar uma imagem pequena grande). - Você pode usar "imageElement.naturalHeight" e "imageElement.naturalWidth" se estiver usando jQuery e também estilizar dinamicamente, mas isso está ficando um pouco complicado. Para ser justo, muitas das outras respostas também exigem que você saiba a largura da imagem para que sua técnica funcione.
Julix
se você não tem certeza de como obter o W, no Chrome, pode usar CTRL + Shift + i (ferramentas de desenvolvedor) e CTRL + Shift + C (modo de inspeção) para passar o mouse sobre os elementos e ver a extensão das coisas. Você também pode decidir qual a largura que deseja e adicionar "width: Wpx" ao seu css.
Julix
4

Suas imagens não estão centralizadas porque os itens da lista não estão centralizados; apenas o texto deles é centralizado. Você pode obter o posicionamento desejado centralizando a lista inteira ou centralizando as imagens na lista.

Uma versão revisada do seu código pode ser encontrada na parte inferior. Na minha revisão, centralizo a lista e as imagens nela.

A verdade é que você não pode centralizar um elemento que tenha uma posição definida como absoluta.

Mas esse comportamento pode ser imitado!

Nota: Essas instruções funcionarão com qualquer elemento do bloco DOM, não apenas com img.

  1. Coloque a sua imagem com uma div ou outra tag (no seu caso, um li).

    <div class="absolute-div">
  <img alt="my-image" src="#">
</div>

    Nota: Os nomes dados a esses elementos não são especiais.

  2. Altere seu css ou scss para dar ao div um posicionamento absoluto e sua imagem centralizada.

    .absolute-div {
  position: absolute;

  width: 100%; 
  // Range to be centered over. 

  // If this element's parent is the body then 100% = the window's width

  // Note: You can apply additional top/bottom and left/right attributes
  // i.e. - top: 200px; left: 200px;

  // Test for desired positioning.
}

.absolute-div img {
  width: 500px;
  // Note: Setting a width is crucial for margin: auto to work.

  margin: 0 auto;
}

E aí está! Seu img deve estar centrado!

Seu código:

Tente isto:

body
{
  text-align : center;
}

#slideshow
{
  list-style : none;
  width      : 800px;
  // alter to taste

  margin     : 50px auto 0;
}

#slideshow li
{
  position : absolute;
}

#slideshow img
{
  border  : 1px solid #CCC;
  padding : 4px;
  height  : 500px;
  width   : auto;
  // This sets the width relative to your set height.

  // Setting a width is required for the margin auto attribute below. 

  margin  : 0 auto;
}
<ul id="slideshow">
    <li><img src="http://lorempixel.com/500/500/nature/" alt="Dummy 1" /></li>
    <li><img src="http://lorempixel.com/500/500/nature/" alt="Dummy 2" /></li>
</ul>
Expandir snippet

Eu espero que isto tenha sido útil. Boa sorte!

D3RPZ1LLA
fonte
3

Um objeto absoluto dentro de um objeto relativo é relativo ao pai, o problema aqui é que você precisa de uma largura estática para o contêiner #slideshowWrappere o restante da solução é como os outros usuários dizem

body {
    text-align: center;
}

#slideshowWrapper {
    margin-top: 50px;
    text-align:center;
    width: 500px;
}

ul#slideshow {
    list-style: none;
    position: relative;
    margin: auto;
}

ul#slideshow li {
    position: relative;
    left: 50%;
}

ul#slideshow li img {
    border: 1px solid #ccc;
    padding: 4px;
    height: 450px;
}

http://jsfiddle.net/ejRTU/10/

eveevans
fonte
Seu violino enquanto as duas imagens se acumulam.
Ryan Gibbons
3

Aqui está a solução fácil e melhor para o elemento central com "position: absolute" 

 body,html{
  min-height:100%;
 }
 
 div.center{
 width:200px;
 left:50%;
 margin-left:-100px;/*this is 50% value for width of the element*/
 position:absolute;
 background:#ddd;
 border:1px solid #999;
 height:100px;
 text-align:center
 }
 
 
<style>

</style>

<body>
 <div class='center'>
  should be centered verticaly
 </div>
</body>
Expandir snippet

SantoshK
fonte
2

Você pode tentar desta maneira:

* { margin: 0px; padding: 0px; }
#body { height: 100vh; width: 100vw; position: relative; 
        text-align: center; 
        background-image: url('https://s-media-cache-ak0.pinimg.com/originals/96/2d/ff/962dff2247ad680c542622e20f44a645.jpg'); 
         background-size: cover; background-repeat: no-repeat; }
.text { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height:100px; 
        display: inline-block; margin: auto; z-index: 999999; }
<html>
<body>
	<div id="body" class="container-fluid">
	  <!--Background-->
	    <!--Text-->
		  <div class="text">
		    <p>Random</p>
		  </div>	  
	</div>
</body>
</html>
Expandir snippet

Chirag Dave
fonte
1

A posição absoluta retira-a do fluxo e a coloca em 0x0 para o pai (último elemento do bloco a ter uma posição absoluta ou relativa à posição).

Não sei ao certo o que exatamente você está tentando realizar. Talvez seja melhor definir o li como a position:relativee isso os centralizará. Dado o seu CSS atual

Confira http://jsfiddle.net/rtgibbons/ejRTU/ para brincar com ele

Ryan Gibbons
fonte
: / no final é quase a mesma solução que a sua ... <Up vote
eveevans
1 
#parent
{
    position : relative;
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25% /* images with aspect ratio: 16:9  */
}

img 
{
    height: auto!important;
    width: auto!important;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    display: block;
    /*  */
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
}

Não me lembro de onde vi o método de centralização listado acima, usando valores negativos superiores, direito, inferior e esquerdo. Para mim, essa técnica é a melhor, na maioria das situações.

Quando uso a combinação acima, a imagem se comporta como uma imagem de fundo com as seguintes configurações:

background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;

Mais detalhes sobre o primeiro exemplo podem ser encontrados aqui:
Manter a proporção de uma div com CSS

Marian07
fonte
0

O que parece estar acontecendo é que existem duas soluções; centrado usando margens e centrado usando posição. Ambos funcionam bem, mas se você deseja posicionar um elemento em absoluto em relação a esse elemento centralizado, é necessário usar o método de posição absoluta, porque a posição absoluta do segundo elemento é padronizada para o primeiro pai que está posicionado. Igual a:

<!-- CENTERED USING MARGIN -->
<div style="width:300px; height:100px; border: 1px solid #000; margin:20px auto; text- align:center;">
    <p style="line-height:4;">width: 300 px; margin: 0 auto</p>
    <div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:-20px; left:0px;">
        <p style="line-height:4;">Absolute</p>
    </div>
</div>

<!-- CENTERED USING POSITION -->
<div style="position:absolute; left:50%; width:300px; height:100px; border: 1px solid #000; margin:20px 0 20px -150px; text-align:center;">
    <p style="line-height:2;">width:300px; position: absolute; left: 50%; margin-left:-150px;</p>
    <div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:0px; left:-105px;">
        <p style="line-height:4;">Absolute</p>
    </div>
</div>

Até ler essa postagem, usando a técnica automática margin: 0, para criar um menu à esquerda do meu conteúdo, tive que criar uma coluna da mesma largura à direita para equilibrá-la. Feio. Obrigado!

Deane Nettles
fonte
0

Use margin-left: x%;onde x é a metade da largura do elemento.

Bibaswann Bandyopadhyay
fonte
-1 

html, body, ul, li, img {
  box-sizing: border-box;
  margin: 0px;  
  padding: 0px;  
}

#slideshowWrapper {
  width: 25rem;
  height: auto;
  position: relative;
  
  margin-top: 50px;
  border: 3px solid black;
}

ul {
  list-style: none;
  border: 3px solid blue;  
}

li {
  /* center horizontal */
  position: relative;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 18px;
  /* center horizontal */
  
  border: 3px solid red; 
}

img {
  border: 1px solid #ccc;
  padding: 4px;
  //width: 200px;
  height: 100px;
}
<body>
  <div id="slideshowWrapper">
    <ul id="slideshow">
      <li><img src="http://via.placeholder.com/350x150" alt="Dummy 1" /></li>
      <li><img src="http://via.placeholder.com/140x100" alt="Dummy 2" /></li>
      <li><img src="http://via.placeholder.com/200x100" alt="Dummy 3" /></li>      
    </ul>
  </div>
</body>
Expandir snippet

antelove
fonte
1
Esta resposta possui apenas código. Embora possa estar correto, ele deve ter uma explicação complementar sobre o motivo pelo qual o código responde à pergunta do OP. O código não é "auto-explicativo" no Stack Exchnge.
JBH