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'?
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'?
hoje, com a Alura e o Google Gemini
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.