将绝对项定位在Bootstrap col中

Question

我正在尝试动画绝对定位的块进入bootstrap col。

问题是bootstrap col没有固定的宽度，所以在不同的屏幕上，我所有的绝对项目都会有不同的

  

如果我将元素设置为例如：translateX（50％），那将是多么令人惊奇。它始终位于我的col-xs-4

的中心

有没有人有这方面的经验？

我试过

使用transform：使用百分比或像素进行翻译。

@keyframes animation {
    0% {transform: translateX(-100%) }
    100% {transform: translateX(0) }
}

这不起作用，因为百分比不是基于bootstrap col的宽度。所以它没有响应，并且每个屏幕尺寸最终都在不同的地方。

Answer 1

left: 50%; transform: translateX(-50%;)会将其水平居中于.col-xs-4