Amigo, para conseguir centralizar a div (central)
na pagina, você terá que aplicar um position: absolute
na mesma, então necessariamente a div (content)
não pode ter um position: static
, neste caso terá de trabalhar com relative
, absolute
ou fixed
Para fazer a div (central)
ocupar toda a pagina, então você deve fazer o html
e o body
também ocuparem toda a pagina, afinal o height: 100%
é relativo ao tamanho do elemento pai.
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
</div>footer>
</div>
O truque para centralizar a div(central)
é ancorar ela no topo e no final, para isto você vai precisar do top: 0px
e bottom: 0px
, mas ao fazer isto e deixar o height: auto
, a div(central)
vai ocupar todo o espaço da div(content)
, um efeito semelhante a um height: 100%
, então se especificamos um height
e colocamos margin: auto
, as margens irão crescer até a posição do top: 0px
e o bottom: 0px
;