Skip to main content
adicionou 417 caracteres ao conteúdo
Fonte Link
Tobias Mesquita
  • 23,1mil
  • 1
  • 32
  • 52

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;

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;
}
<div id="content">
    <div id="central">
        
    </div>
</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;

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
  </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;

adicionou 417 caracteres ao conteúdo
Fonte Link
Tobias Mesquita
  • 23,1mil
  • 1
  • 32
  • 52

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: 180px;120px;
    margin: auto;
    background-color: white;
    box-shadow: 0px 0px 10px black;
}
<div id="content">
    <div id="central">
        
    </div>
</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;

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: 180px;
    margin: auto;
    background-color: white;
    box-shadow: 0px 0px 10px black;
}
<div id="content">
    <div id="central">
        
    </div>
</div>

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;
}
<div id="content">
    <div id="central">
        
    </div>
</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;

Fonte Link
Tobias Mesquita
  • 23,1mil
  • 1
  • 32
  • 52

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: 180px;
    margin: auto;
    background-color: white;
    box-shadow: 0px 0px 10px black;
}
<div id="content">
    <div id="central">
        
    </div>
</div>