css chapter of absolute absolutely positioned elements centered skills

Generally, absolute positioning element centrally, left:50%;top:50%;then margin负值, or by transformalso achieve the desired effect.
Today found another skill, use, top,left,right,bottom取值0then magin:auto, can be realized in the middle.
the reason:

For absolutely positioned elements, the top, right, bottom,and left properties specify offsets from the edge of the element's containing block (what the element is positioned relative to).The margin of the element is then positioned inside these offsets.
<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;
}

Note: The child element large, up and down can be centered around the failure.

This article is reproduced in: ape 2048➺ https://www.mk2048.com/blog/blog.php?id=hh0iakjaaaa

Guess you like

Origin www.cnblogs.com/baimeishaoxia/p/12552249.html