css中的“ transform: translate(-50%, -50%)； “的意思

最新推荐文章于 2025-04-01 17:11:18 发布

苏遗05

最新推荐文章于 2025-04-01 17:11:18 发布

阅读量7k

点赞数 10

文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_45207162/article/details/131215863

版权

translate(-50%,-50%)是CSStransform属性的一种应用，用于元素的中心定位。结合position:absolute和top:50%;left:50%可使元素在容器内水平垂直居中。这种方法不改变元素的布局，移动量为元素自身宽高的负50%。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在CSS中，transform: translate(-50%, -50%); 是一种用于移动元素的属性。

translate 是 transform 的一个功能，可以改变元素在页面上的位置，不影响其他元素的布局。它接受两个参数，第一个参数表示x轴（水平）移动的距离，第二个参数表示y轴（垂直）移动的距离。

在 translate(-50%, -50%) 中，元素将在水平和垂直方向上各自移动其自身宽度或高度的50%的距离。请注意，这里的移动是负方向的，所以元素实际上是向左和向上移动。

这种特定的用法（translate(-50%, -50%)）经常和 position: absolute; top: 50%; left: 50%; 一起使用，用于将元素居中。这里的原理是，首先通过 top: 50%; left: 50%; 将元素的左上角移到其容器的中心，然后再通过 translate(-50%, -50%) 向左和向上移动元素的一半宽度和一半高度，以此达到完全居中的效果。