Linearer Farbverlauf wird nach horizontaler und vertikaler Zentrierung nicht angezeigt

Question

Der Hintergrundgradient funktioniert nicht, wenn ich die Seite horizontal und vertikal zentrierte. Hier ist der Code:

body { 
 
    background: linear-gradient(to right, #CB356B 0%, #BD3F32 100%); 
 
    margin: 0; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
}

<h1>Lorem Ipsum</h1>

JsFiddle

I tried that as well, aber es ist nicht zu arbeiten, es sei denn, ich Marge Körper hinzufügen, die will ich nicht da.

Danke.

Answer 1

Da Ihre body auf absolut eingestellt ist, ist ihre Größe 0 für Ihr HTML. Wenn Sie Ihre html auf 100% Höhe einstellen, wird dies behoben.

html { 
 
    height: 100%; 
 
} 
 

 
body{ 
 
    background: linear-gradient(to right, #CB356B 0%, #BD3F32 100%); 
 
    margin: 0; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
}

<h1>Lorem Ipsum</h1>

Answer 2

dies versuchen, muss der Körper die ganze Höhe des Bildschirms nehmen:

body{ 
 
    background: linear-gradient(to right, #CB356B 0%, #BD3F32 100%); 
 
    margin: 0; 
 
    height:100vh; 
 
} 
 

 
div.block{ 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
}

<div class="block"> 
 
    <h1>Lorem Ipsum</h1> 
 
</div>