margin: auto only centers an element horizontally. Vertical centering has always been trickier. You can do it by setting the container to display: table and the child to display: table-cell; vertical-align: middle;
{margin:auto;} applies the default “auto” value to all 4 parameters: top, right, bottom, and left; thereby, overwriting/replacing the margin-top and margin-bottom values that you had previously assigned.
The vertical “auto” value of a paragraph is it’s default vertical margin value, which is usually around 1em.
As already pointed out, when “auto” is applied to margin-left and margin-right of a block object whose width is less than that of its container, it is centered.
To center the text within a paragraph, you would assign p {text-align:center}.