Set property to current width of element with CSS?

Question

I'm looking for some syntax like this:

.centered{
    left: calc(50% - current-width/2)
}

Basically, a way to reference the current-width of the target element so that I can have a flexible-width item centered. Does this exist?

Answer 1

One answer is to move it left and then translate it:

.centered {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
}

But a better way is to use Flexbox on the parent element:

.centeredParent {
    display: flex;
    justify-content: center;
}