Vamos supor que vou posicionar uma div
100px
de height
e width
, (um quadrado) então eu posiciono este quadrado em margin-left 40%
e margin-top 20%
, o quadrado esta mais ou menos centralizado, certo? Agora vou colocar um texto escrito "oi" dentro dele com a tag <p>
, agora se eu usar a lupa, acontece o seguinte, somente a lateral direita e a parte de baixo do quadrado vão expandir enquanto seus outros dois lados não expande e o texto permanece intacto, digamos que eu quero que tudo expanda sem que as laterais se movam como faria isso ?
Sobre o código que falei acima:
.caracteristicas{
position: absolute;
background-color: green;
height: 100px;
width: 100px;
margin-left: 40%;
margin-top: 20%;
}
<html>
<head>
<title>Aprendendo a centralizar</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="caracteristicas">
<p>oi</p>
</div>
</body>
</html>
position: absolute
. Tenta centralizar as coisas usando oposition: relative
que vai ter resultados melhores. Mas, se combinar oabsolute
aomargin
, de uma forma ou outra não está colaborando pra estruturar funcionar. Sempre que usarabsolute
combine com o atributoleft
,top
,right
,bottom
. Algo comotop: 20%
por exemplo.position
, troquemargin-left: 40%, margin-top: 20%
pormargin: 20% auto 0 auto
. Isso garante 100% de centralização do objeto.