Oi gente, bom dia! Preciso de uma ajuda, eu gostaria de saber como faço para centralizar na página o conteúdo, blocos de divs, section, span ou imagens utilizando as propriedades 'position absolute' e 'position relative'?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Oi gente, bom dia! Preciso de uma ajuda, eu gostaria de saber como faço para centralizar na página o conteúdo, blocos de divs, section, span ou imagens utilizando as propriedades 'position absolute' e 'position relative'?
Centralizar independentemente dos outros elementos?
Bom, a princípio, se você conhece a largura do seu elemento, pode fazer um cálculo. Vou demonstrar com a div abaixo, que tem 200px de largura.
<body>
<style type="text/css">
.absoluto {
width: 200px;
height: 100px;
background-color: black;
position: absolute;
left: calc(50% - 100px);
top: 150px;
}
.relativo {
width: 50px;
height: 30px;
background-color: red;
position: relative;
left: calc(50% - 25px);
top: calc(50% - 15px);
}
</style>
<div class="absoluto"><div class="relativo"></div></div>
</body>Com a posição absoluta, o elemento se destaca do restante da página. O cálculo feito para dar a posição left na classe absoluto é o seguinte: vá até o meio da página (50%) e depois volte metade do tamanho da minha div (200/2 = 100px).
Assim, o elemento fica centralizado! Com position: relative o cálculo funciona igual, porém seu elemento será centralizado dentro do elemento pai dele. No caso, a div.relativo se centraliza tanto no eixo horizontal quanto vertical dentro da div.absoluto.