📌  相关文章
📜  为什么我们在 css 中翻译 -50%、-50%(1)

📅  最后修改于: 2023-12-03 15:35:59.617000             🧑  作者: Mango

在 CSS 中使用 -50%、-50% 的原因

什么是 -50%、-50%

在 CSS 中，-50%、-50% 表示元素的中心点（即 transform-origin）位于元素的中心点。

为什么要使用 -50%、-50%

使用 -50%、-50%，可以很方便地实现在任何大小的元素中心点都位于元素中心的效果。

具体来说，在一个宽度和高度未知的元素中心点位于元素中心的做法是：

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

其中，top: 50% 使元素的顶部位于父元素中心点的纵坐标上，left: 50% 使元素的左边位于父元素中心点的横坐标上，transform: translate(-50%, -50%) 参照自身的宽度和高度，将元素的中心点移动到元素的中心上。

补充说明
  • 该方法用于已确定宽和高的元素效果更佳，对于未知宽高的元素，它们的中心点偏移则会导致整个元素位置偏移；
  • 对于使用该方法实现元素居中时，元素的宽度和高度应该由内容撑开，或者使用 max-width、max-height 确保元素不会过宽或过高。

参考链接：