posicionamento de h1 dentro de header

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

ola Yan, achei muito boa a sua solução, mas vc saberia me dizer o pq o h1 nao aceita o margin nesse caso?

Bom dia Leonardo, obrigado pelo feedback ^^.

Então, o elemento h1 aceita receber uma margin ainda assim, ela pode ser definida e vai ser utilizada na exibição dos elementos. Quando definimos a margin com o valor auto, ela é calculada automaticamente pelo navegador que você está executando. Definindo a propriedade como margin: 0 auto; ele não deixará espaço nas laterais e tentará deixar um espaço igual para a margem superior e inferior.

Estava buscando a resposta para esse problema, mas não encontrei nada muito claro... Mas como o elemento precisa de uma referência para calcular essa margem, imagino que esteja com algum problema neste aspecto e, por esse motivo, não está conseguindo centralizar na vertical.

Espero ter ajudado, muito embora não tenha o conhecimento para responder com certeza essa ^^ e qualquer resposta mais precisa que conseguir, fico grato pelo retorno, continuarei a minha busca.

new Saudacao();

; )