css篇之absolute绝对定位元素居中技巧

最新推荐文章于 2022-05-21 15:08:40 发布

转载最新推荐文章于 2022-05-21 15:08:40 发布 · 183 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000008278816

本文介绍了一种新颖的CSS绝对定位元素居中方法：通过设置top、right、bottom、left为0，并配合margin:auto实现。这种方法适用于需要精确居中的场景，但需注意当子元素尺寸较大时可能存在的限制。

一般地，居中绝对定位元素，left:50%;top:50%;再margin负值或者通过transform也可达到效果。
今天发现另一个技巧，利用，top,left,right,bottom取值0，再magin:auto,即可实现居中。
原因：

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;
}

注：子元素大的话，上下可居中，左右失效。