垂直和水平居中後不顯示線性漸變

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>