Why does “left: 50%, transform: translateX(-50%)” horizontally center an element?

Question

The CSS left property is based on the size of the parent element. The transform property is based on the size of the target element.

Name: transform

Percentages: refer to the size of bounding box [of the element to which the style is applied]

http://www.w3.org/TR/css3-transforms/#transform-property

‘top’

Percentages: refer to height of containing block

http://www.w3.org/TR/CSS2/visuren.html#position-props

If the parent is 1000px wide and the child is 100px, The browser would interpret the rules in your question as:

Example 1:

.prompt-panel {
    left: 500px;
    transform: translateX(-50px);
}

Example 2:

.prompt-panel {
    left: -500px;
    transform: translateX(50px);
}