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

i refactored of css , pleasantly surprised find easier way horizontally align absolutely positioned element:

.prompt-panel {     left: 50%;     transform: translatex(-50%); } 

this works great! if element's width auto. however, not understand what's going on make work. assumption translatex modern, more performant means of moving element around, not appear case.

shouldn't these 2 values cancel each other out? furthermore, why does

.prompt-panel {     left: -50%;     transform: translatex(50%); } 

not show same result first code snippet?

the css left property based on size of parent element. transform property based on size of target element.

name: transform

percentages: refer size of bounding box [of element style applied]

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

'top'

percentages: refer height of containing block

http://www.w3.org/tr/css2/visuren.html#position-props

if parent 1000px wide , child 100px, browser interpret rules in question as:

example 1:

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

example 2:

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