Hice un fondo degradado y quiero centralizar este bloque de texto. Mi objetivo es crear un encabezado que se centralice en el centro de la pantalla sin importar la resolución de la ventana gráfica.

Así que hice de este encabezado una posición absoluta y utilicé este método de centralización que encontré en línea. Se centralizó perfectamente, el problema es que el fondo degradado se vuelve blanco (parece que el encabezado está sobre el fondo del cuerpo, no lo sé). Ya he intentado usar la posición fija, pero el problema persiste, otros tipos de posición no se centralizan.

* {
  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>

Puedes ejecutar el código aquí:https: //jsfiddle.net/Jhugorn/dsknqp7x/1 Si saca el encabezado en el CSS, el fondo aparece bien. ¿Cómo puedo hacer que aparezca el fondo y centralizar este elemento al mismo tiempo?