Linear gradient won't show after centering vertically and horizontally

Question

Background gradient isn't working when I centered the page horizontally and vertically. Here's the 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, but it's not working too, unless I add margin to body, which I don't want there.

Thanks.

Answer 1

Because your body is set to absolute its size is 0 for your html. Setting your html to 100% height will fix it.

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>