Olá Leonardo, tudo bem?
Bem, para resolver isso, você pode fazer da seguinte forma:
1) Defina o seu elemento de texto, o H1, como position: absolute; pois assim, é como se você estivesse descolando este elemento da página, e portanto, poderá deslocá-lo por ela.
2) Defina a posição do seu elemento Header como relativa... assim, é como se você destacasse este elemento também, fazendo como que ele continue "grudado" ao objeto.
3) Você pode definir a distância do topo utilizando a propriedade top, no CSS e definindo esta em 50%, ou seja, metade do tamanho de seu header.
4) Seguindo os passos anteriores, o seu problema ainda vai existir, isso porque ao definir o alinhamento de 50%, o navegador irá utilizar a linha do topo do elemento (o H1) como ponto inicial, assim, o topo estará disposto na linha de 50%, enquanto o elemento em si, estará ocupando a linha de 50% - 75% do cabeçalho.
Como resolver?
5) Utilize a propriedade translate, passando como parâmetro o valor de (0, -50%).
o translate irá utilizar o tamanho do elemento para o posicionamento, assim, leia-se:
transform: translate (tamanho Horizontal, tamanho Vertical);
utilizando o valor de -50%, estaremos redefinindo a "linha do objeto" para o centro dele, corrigindo o "erro" que ocorreu no ponto 04.
Espero ter ajudado!
new Saudacoes();
; )
h1 {
position: absolute;
top: 50%;
transform: translate(0,-50%);
}
header{
position: relative;
background-color: grey;
height: 250px;
}
