css - middle - vertical align image inside absolute div




Como centralizar o elemento absolutamente posicionado em div? (18)

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?


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

Aqui está um violino JS

A pista é, que left: 50% é relativo ao pai, enquanto a transformação de translate é relativa aos elementos largura / altura.

Desta forma, você tem um elemento perfeitamente centrado, com uma largura flexível em ambos os pais e filho. 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, largura e altura do pai e da criança podem ser totalmente flexíveis (e / ou desconhecidos)):

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

Lembre-se de que você também pode precisar transform fornecedor com prefixo. Por exemplo, -webkit-transform: translate(-50%,-50%);


Aqui está um plugin jQuery útil para fazer isso. Encontrado here . 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)
    });
};

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

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


Eu entendo que esta pergunta já tem algumas respostas, mas eu 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>

O que isto significa é dizer-me um top: 50% e um left: 50% , depois transforma (cria espaço) no eixo X / Y para o valor -50% , num sentido "cria um espaço de espelho".

Como tal, isto 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 precisar saber a altura / largura dos pais.
  2. Trabalhar em responsivo.
  3. Trabalhe no eixo X ou Y. Ou ambos, como no meu exemplo.
  4. Eu não posso chegar a uma situação em que isso não funcione.

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:

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

CSS:

#parent {
  display: table;
}
#child {
  display: table-cell;
  vertical-align: middle;
}

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.


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/


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

Isto e mais exemplos here


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

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 here


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.


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.


Uma abordagem simples que funcionou para eu 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 em versões recentes do Firefox, Chrome, IE, Edge e Safari.


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:

<div id="intro_img">

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

</div>

CSS:

#intro_img {
    text-align:center;
}

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


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

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

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


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







absolute