垂直と水平にセンタリングした後にリニアグラジエントが表示されない

Question

ページを水平に、垂直にセンタリングすると、グラデーショングラディエントが機能しません。

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を、私は、私はそこにしたくない体にマージンを追加しない限り、それは、あまりにも働いていない：ここではコードです。

ありがとうございました。

Answer 1

bodyが絶対サイズに設定されているため、HTMLのサイズは0です。 htmlを100％の高さに設定すると修正されます。

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

体は、画面のすべての高さは取る必要があり、これを試してみてください。

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>