Question: I would like to centre `.login` inside `body`. Currently everything looks as desired, however if I inspect it, I can see that is not actually in `body`'s area:

[![enter image description here](https://i.stack.imgur.com/1ZDKk.png)](https://i.stack.imgur.com/1ZDKk.png)

I could resolve it with:

```
.login {
 position: absolute;
 width: 100%;
 height: 100%;
}

```

But that will break the body. How do I fix this while keeping the element in the normal work flow?

Answer: 
Does this solve your problem?

```
html,body,.login{
  height:100%;
  margin:0;
}

```

The reason `height:100%` does not work without `position: absolute;` is because the parent of `.login` does not have 100% of the page. It would only have 100% the height of `body` which is very small: it acts as the same way default `position:static` does. [This answer](https://stackoverflow.com/a/5324642/4907552) gives slightly more detail .
Add this to your code:

```
html, body { height: 100%; }
.login { height: 100%; }

```