Generalmente, el elemento de posicionamiento absoluto en el centro, left:50%;top:50%;
a continuación margin负值
, o por transform
también lograr el efecto deseado.
Hoy en día se encontró otra habilidad, el uso, top,left,right,bottom取值0
a continuación magin:auto
, se puede realizar en el medio.
Motivo:
Para los elementos de posición absoluta, la parte superior, derecho, inferior, y las propiedades de izquierda especificar desplazamientos desde el borde del bloque de contención del elemento (lo que el elemento se coloca en relación con) .El margen del elemento se coloca entonces dentro de estas compensaciones.
<div class='box>
<div class='jz'></div>
</div>
div.box{
position: relative;
height: 300px;
background: #989eaa;
}
div.fz{
width: 100px;
height: 100px;
background: #499682;
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
margin:auto;
}
Nota: El elemento hijo grande, arriba y abajo puede estar centrada en el fracaso.
Este artículo se reproduce en: mono 2048➺ https://www.mk2048.com/blog/blog.php?id=hh0iakjaaaa