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％将会修复它。

＆＃13;

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%);
}

＆＃13;

<h1>Lorem Ipsum</h1>

＆＃13;

Answer 2

正文需要有一些内容才能让背景显示：

＆＃13;

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%);
}

＆＃13;

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

＆＃13;

您也可以申请html元素：

＆＃13;

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

＆＃13;

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

＆＃13;

这是另一个更好地了解正在发生的事情的问题：How to remove the stripes that appears when using linear gradient property

垂直和水平居中后，线性渐变不会显示

2 个答案: