Solution 1
You could possibly try this as well to your code:
[html].rpp_item.rpp_visible {
position: static !important;
}[/html]
It will change the item position back to static, but it will be much easier to center. The ordering will be most likely changed or reversed, since it’s determined by the absolute position. But if that’s not a big issue, then this is the best option.
Solution 2
If the order matters, then changing the wrapper to a table layout and then transforming the elements to force them to middle. In this case your CSS code is not needed, only this:
[html].rpp_wrapper { display: table !important; }
.rpp_item.rpp_visible {
left: 50% !important;
transform: translate(-50%, 0) !important;
}[/html]
I hope this helps 🙂