how does auto actually knows where is the center?
As we all have guessed, auto is for automatic, so when CSS reads it in a value, it adjusts the property automatically according to the surrounding space of the element (in the case of margin). For example, having:
margin: 0 auto;
As we remember sets the four sides of the element in pairs, the first pair (top and bottom) will have zero margin while the second pair( right and left) will have an automatic margin which means that the width of our element (as well as the right and left measurements of padding and border, if any) will be subtracted from the container element’s width. The leftover space will be divided into two equal parts and assigned to the margin on the right and the left providing us with a horizontally centered element.