Generally, absolute positioning element centrally, left:50%;top:50%;
then margin负值
, or by transform
also achieve the desired effect.
Today found another skill, use, top,left,right,bottom取值0
then 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