Por que o fundo fica branco quando adiciono um elemento de posição absoluta?
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?