1

Existem diversas maneiras para centralizar o conteúdo de uma <div> verticalmente. Entretanto, quando tratamos de uma altura que não seja em pixels, as pessoas começam a pensar se há um método eficiente para isso.

Criei uma forma que achei eficiente e vim aqui a procura de alguém que ofereça uma proposta melhor, pois uma das maiores dificuldades que um front-end encontra hoje é centralizar um conteúdo de uma div que não tenha altura em pixels.

HTML:

<section>
  <article>
    <div>
      <p>Centro</p>
    </div>
  </article>
</section>

CSS:

section{
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ddd;
  display: flex;
  flex-direction: column;
}

article{
  flex: 1;
  display: flex;
  margin: 0 auto;
}

article > div{
  margin: auto 0;
}

Demo: https://codepen.io/anon/pen/PZXdzb

1

2 Respostas 2

3

Se for considerar o uso de flexbox, como no seu exemplo, uma solução é usar a propriedade align-items:

html, body {
  margin: 0;
  height: 100%;
  width:  100%
}

body {
  align-items: center;
  display: flex;  
  justify-content: center
}
<div>olá</div>

3
  • Ótimo! Obrigado por compartilhar essas propriedades Renan. Commented 11/02/2016 às 16:01
  • @ZenoJunior Mas espere por outras respostas, calma rapaz. Commented 11/02/2016 às 16:02
  • Ah, estou começando aqui. Já desmarquei... Commented 11/02/2016 às 18:31
1

Uma boa alternativa é:

section{
   position: relative;
   width: 100%;
   height: 100%;
}
article > div{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

(para facilitar a leitura, não inseri os prefixos necessários para o transform)

Usando este método, eu costumo setar uma largura máxima para a div.

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 .