Fiz um fundo gradiente e quero centralizar esse bloco de texto. Meu objetivo é criar um cabeçalho centralizado no meio da tela, independentemente da resolução da janela de visualizaçã

Então, fiz deste cabeçalho uma posição absoluta e usei esse método de centralização que encontrei on-line. Centralizou perfeitamente, o problema é que o fundo gradiente fica branco (parece que o cabeçalho está acima do fundo do corpo, eu não sei). Eu já tentei usar a posição fixa, mas o problema persiste, outros tipos de posição não centralizam.

* {
  margin: 0px;
  padding: 0px;
}

body {
  background: linear-gradient(20deg, #B7B0F6, #B1D5F9);
}

header {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%)
}

<header>
  <h1>Hello!</h1>
</header>

Você pode executar o código aqui:https: //jsfiddle.net/Jhugorn/dsknqp7x/1 Se você remover o cabeçalho no CSS, o plano de fundo aparecerá bem. Como faço para exibir o plano de fundo e centralizar esse elemento ao mesmo tempo?