How do I centre absolutely positioned content of unknown width?

Question

Before someone asks me why the hell I would want to do this let me come straight out and tell you. That way one of you clever peeps out there can tell me a far better way...

Answer 1

Pushing the element left by 50% of its width and then translating it horizontally by 50% has worked for me.

.element {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
} 

I found the concept in the following link, and then I translated to fit my horizontal align needs: https://gist.github.com/colintoh/62c78414443e758c9991#file-douchebag-vertical-align-css