2

Olá, pessoal. Criei um header com 100% do tamanho de tela (independente do tamanho de tela) assim:

header {
  background-image: url('img/background.jpg');
  height: 100vh;
  width: 100%;
}
<header>
  <div class="texto-header">
    <h1>Nova Zelândia</h1>
    <p>Um paraiso do outro lado do mundo.</p>
  </div>
</header>

Preciso que meu texto fique no centro desse header (horizontal e vertical).

0

2 Respostas 2

1

Pode usar transform: translateY() para centralizar verticalmente e text-align: center para centralizar horizontalmente:

header{
   background-image: url('img/background.jpg');
   height: 100vh;
   width: 100%;
   background-color: yellow;
 }

.texto-header{
   position: relative;
   top: 50%;
   transform: translateY(-50%);
   text-align: center;
}
<header>
  <div class="texto-header">
    <h1>Nova Zelândia</h1>
    <p>Um paraiso do outro lado do mundo.</p>
  </div>
</header>

3
  • Cara, algo não deu certo. O texto ficou no meio da página, mas não ficou exatamente no meio, sabe? Ele ficou meio alinhada a esquerdo. Commented 23/05/2018 às 20:17
  • Fiz uma pequena alteração, veja agora.
    – Sam
    Commented 23/05/2018 às 20:24
  • Agora funcionou. Acredito que um menu que eu tinha feito aqui tambem atrapalhou, hehe. Muito obrigado, =). Commented 23/05/2018 às 20:27
0

Tente isto abaixo, utilizei o display:flex e suas propriedades na classe texto-header:

header {
  background-image: url('img/background.jpg');
  height: 100vh;
  width: 100%;
}

.texto-header {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;  
  align-items: center;
}
<header>
  <div class="texto-header">
    <h1>Nova Zelândia</h1>
    <p>Um paraiso do outro lado do mundo.</p>
  </div>
</header>

1
  • Cara, não funcionou. O texto ficou centralizado horizontalmente, mas não ficou verticalmente. Commented 23/05/2018 às 20:26

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