40

Estou tentando centralizar verticalmente o conteúdo de um elemento que tem position: absolute.

Consegui fazer o conteúdo se posicionar da metade para baixo do container, no entanto, da metade para cima o espaço fica "sobrando".

Como posso resolver isso apenas utilizando ?

Eis o meu código até o momento:

.container {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #ccc;
}

.content {
    position: absolute;
    top: 50%;
    left: 25%;
    width: 50%;
    text-align: center;
}
<div class="container">
    <div class="content">
        <h1>Conteúdo</h1>
        <p>Subtítulo</p>
    </div>
</div>

A ideia é que o elemento .container sobreponha o elemento-pai, como se fosse um indicador de loading em cima de apenas um elemento na página.

2
  • 1
    É realmente necessário que o elemento tenha posição absoluta? Ou apenas seu contêiner?
    – mgibsonbr
    Commented 12/12/2013 às 0:51
  • 1
    Atualizei a questão com uma melhor descrição do objetivo. Commented 12/12/2013 às 1:17

6 Respostas 6

31

Desta forma independe do conteúdo:

.container {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #ccc;
}
.content {
    position: absolute;
    top: 50%;
    left: 25%;
    width: 50%;
    text-align: center;
    -webkit-transform: translateY( -50% );
    -moz-transform: translateY( -50% );
    transform: translateY( -50% );
}

Veja no JSFiddle

3
  • transform é CSS3?
    – Joao Paulo
    Commented 12/12/2013 às 11:24
  • Não, já o translateX e translateY estou tentando descobrir se é implementação nova. Commented 12/12/2013 às 12:15
  • É isto mesmo!!!
    – ninja_corp
    Commented 12/12/2013 às 17:41
19

Utilizando o exemplo dado, o problema está no elemento com a classe content cujo mesmo não tem uma altura definida, o que não permite calcular o centro do mesmo.

Mesmo ao atribuir uma altura, sendo um elemento com uma posição absoluta, o mesmo está numa camada superior a dos restantes elementos, o que faz com que a altura do mesmo não seja calculada em função dos restantes elementos.

Solução

Uma das possíveis soluções passa por indicar ao browser que os elementos devem assumir os comportamentos visuais das tabelas:

HTML

<div class="container">
    <div class="content">
        <h1>Conteúdo</h1>
        <p>Subtítulo</p>
    </div>
</div>

CSS

.container {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #ccc;
    display:table;
}

.content {
    text-align: center;
    vertical-align:middle;
    display:table-cell;
}

Veja no JSFiddle

Ainda assim, é necessário retirar a definição position:absolute pois a mesma entra em conflito com a nova definição display:table-cell que na sua essência não pode ser posicionada de forma absoluta uma vez que está sempre relativa à tabela onde se encontra inserida.

Dependendo do objectivo final, pode ser aplicado ao elemento com a classe content a definição position:relative de forma a poder fazer do mesmo um contentor para outros elementos filhos.

1
  • Adicione body { height: 100%; margin: 0; padding: 0;} que seu exemplo fica ainda melhor (:
    – talles
    Commented 12/12/2013 às 0:39
10

Esse artigo (em inglês) descrebe uma variedade de maneiras de se atingir esse objetivo. Para seu caso particular (elemento com posição absoluta) eu recomendaria o método "esticar":

Coloque seu elemento com todas as posições (top, left, bottom e right) como 0. Isso fará com que ele "se estique" para ocupar a tela inteira. Mas como ele é menor que a tela, colocar a margem como auto fará com que ela se auto-ajuste às dimensões reais do elemento.

.content {
    position: absolute;
    text-align: center;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 50%;
    margin: auto;    
}

Veja no JSFiddle.

Note que é neessário especificar uma altura para que esse método funcione como esperado.

4

Cara, pra centralizar tanto vertical quanto horizontal neste caso...você precisa definir o tamanho do elemento, e além do top:50% usar margin-top negativo com metade da altura do elemento.

Por exemplo no seu código:

.content {
    position: absolute;
    height:120px;
    margin-top:-60px;
    top: 50%;
    left: 25%;
    border:1px solid red;
    width: 50%;
    text-align: center;
}
3

Se for para centralizar uma DIV em uma página, por enquanto não criaram nenhuma maneira para fazer isso, agora existem 3 maneiras para fazer isso:

  1. Utilizando uma DIV Absoluta: você coloca todo o seu conteúdo da página em uma div única e esta é então inserida com as tags div {position:absolute;top:50%;left:50% margin:-25%;}
  2. Transformando a página em uma tabela: no CSS da tag <body> coloque para que ela seja exibida como uma tabela: body{display:table} e então nas coloque para que estas sejam exibidas como cédulas da tabela: div{display:table-cell;}, isso vai centralizar verticalmente.
  3. Definindo o tamanho do HTML e do BODY como 100%: quando o <html> e o <body> são definidos com uma altura fixa eles podem ser usados como referência para a altura das <div>. Para isso faça: html,body{height:100%} assim será possível usar no atributo margin o valor de margin top assim: div{margin-top:10%}
1

Eu fazia o método de table-cell até descobrir um melhor ainda:

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Aplique isso ao elemento que deseja centralizar verticalmente. Não é necessário nenhum controle de altura no elemento pai e muito menos no elemento desejado.

Lembrando que meu método é bem parecido com um postado aqui, mas estou utilizando position: relative, ao invés de absolute.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .