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

两种居中技术：
1 左：5 0%；顶部：5 0% + 负边距。
时间：2 000年左右。
地点：网络开发论坛。
具体数字：元素宽度和高度的一半。
操作：Left/Top=5 0% 以父容器为中心。
要重新居中，请使用负边距。
陷阱：如果你错误地计算了保证金值，它很容易被抵消。

2 上/左/右/下：0 + 边距：自动。
时间：2 003 年左右。
其中：CSS 规范草案。
具体数量：没有固定值。
操作：将四个边定位到父容器的边缘。
保证金是自动分配的。
Pit：仅水平和垂直居中，左右padding较大会出现错位。

您选择哪一个取决于您的需求。

如何利用CSS实现绝对定位居中技术

你好，说起来，我在2 02 2 年实施了一个项目，城市很大，需求量很大，客户给了我很大的预算。
当时，这里的兼容性方面，普遍的用法是使用负margin值，很方便吧？不幸的是，这种方法有一个问题，就是必须提前知道元素的大小，否则负边距调整就会不准确。
我当时很迷茫，必须想办法。
后来我意识到我可能必须使用JS来获取元素的大小。

然后我在CSS3 中发现了一个好方法，那就是使用transform。
这个平移偏移的百分比值和它的大小有关，很巧妙。
我记得我当时写的是这样的，.conter{width:6 00px;height:4 00px;position:absolute;left:5 0%;top:5 0%;margin-top:-2 00px;margin-left:-3 00px;}，一半高度，一半宽度，这样调整。

后来随着CSS3 的出现，我发现了更好的办法，就是使用transform，写成.conter{width:6 00px;height:4 00px;position:absolute;left:5 0%;top:5 0%;transform:translate(-5 0%,-5 0%);}，5 0%就是它的一半大小，简单方便。

后来我发现了Margin.auto属性来实现绝对定位元素的居中。
上、下、左、右位置均为0位置。
写法为.conter{width:6 00px;height:4 00px;position:absolute;left:0;top:0;right:0;bottom:0;margin:auto;}。
这样，它将自动居中。

最后我想了一下。
无论浏览器版本如何，使用 CSS3 盒模型，尤其是流体布局，都是一个不错的选择。
这种设计既舒适又灵活。
嗯，就是这样。

使用JS或CSS如何实现瀑布流布局，几种方案介绍

瀑布流布局JS解决方案：使用绝对定位找到最短的列来定位新元素 CSS解决方案有很多局限性。
Grid 和 Flex 布局具有预定义的高度；所需的列顺序问题和 Float/Inline-Block 可能无法平衡列高度。
使用推荐的 JS 解决方案或 Masonry 库。