Positioning of div

Question

I am trying to make a joke with css and Html5 of this type.

Only it’s causing a lot of problems because

1. To div (content)principality is not occupying all the height and width of the page.
2. The Positioning of div (central) It appears to be in the middle but when it goes to larger screens it doesn’t happen. Code

* {
  margin: 0px;
  padding: 0px;
}
body {
  background-color: #FF0000;
}
#centro {
  position: relative;
  margin-top: 20%;
  margin-bottom: 15%;
  width: 100%;
  height: 200px;
  margin-right: 0;
  margin-left: 0;
  background: rgba(255,255,255,0.3);
  box-sizing: border-box;
}
section p {
  padding: 10px;
  font-family: Comic Sans MS;
  font-size: 40px;
  width: 100%;
  height: 80%;
  box-sizing: border-box;
  text-align: center;
}
footer {
  box-sizing: border-box;
  padding: 10px;
  text-align: center;
}
#content {
  width: 100%;
  height: 100%;
  border: 2px solid #8AC007;
  box-sizing: border-box;
}

<div id="content">
  <section id="centro">
    <p>
      Teste
    </p>
  </section>
  <footer>
    Teste
  </footer>
</div>

Thank you.

Answer 1

Friend, to be able to centralize the div (central) on the page, you will have to apply a position: absolute in the same, then necessarily the div (content) can’t have a position: static, in this case you will have to work with relative, absolute or fixed

To make the div (central) occupy the entire page, then you must do the html and the body also occupy the entire page, after all the height: 100%is relative to the size of the parent element.

html, body {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

#content {
  background-color: gainsboro;
  width: 100%;
  height: 100%;
}

#central {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 100%;
  height: 120px;
  margin: auto;
  background-color: white;
  box-shadow: 0px 0px 10px black;
}

#central p {
  margin: 0px;
  height: 120px;
  line-height: 120px;
  text-align: center;
  font-weight: bold;
  font-size: 36px;
}

footer {
  position: absolute;
  text-align: center;
  width: 100%;  
  bottom: 0px;
}

<div id="content">
  <div id="central">
    <p>Texto</p>
  </div>
  <footer>
    Texto
  </footer>
</div>

The trick to center the div(central) is anchor her at the top and at the end, for this you will need the top: 0px and bottom: 0px, but by doing this and leaving the height: auto, to div(central) will occupy the entire space of the div(content), an effect similar to a height: 100%, then if we specify a height and put margin: auto, the margins will grow until the position of the top: 0px and the bottom: 0px;