Background not filling up

Question

class Landing extends Component {
  state = {
    box: {
      width: "300px",
      height: "100px",
      margin: "0 auto",
      border: "1px solid blue",
      textAlign: "center",
      verticalAlign: "middle",
      lineHeight: "90px",
      backgroundColor: "white",
    },

    body: {
      backgroundColor: "red",
    },
  };

  render() {
    return (
      <div style={this.state.body}>
        <div style={this.state.box}>Hello</div>
      </div>
    );
  }
}

What I want is that the body's background be red, with a box in the middle which has a white background with text in it.

What happens is that the background of the page is not filling up, rather only a part of it. Background is red only in something like the row of the box.

Please help

Answer 1

To make the red box fill the whole screen you have to put some css that ensures that the height of the elements surrounding the red box is 100%:

html,
body,
#root {
  height: 100%;
  margin: 0;
}

The margin is so that there isn't a small white area surrounding the red box

Answer 2

You want the box to be centered in the middle of the screen.

So you need body to fill the screen and center its children (for example with flex).

const parentStyle = {
  backgroundColor: `red`,
  height: `100vh`,
  width: `100vw`,
  display: `flex`,
  alignItems: `center`,
  justifyItems: `center`,
};