Margen superior / inferior no funciona al margen izquierdo / derecho en una muestra

Soy nuevo en HTML y CSS. He intentado el código a continuación

   Center   

El “div2” está centrado horizontalmente.

Luego cambio el ancho a la altura y el margen-izquierda / derecha al margen-superior / inferior. (el código a continuación)

    Center   

No está centrado verticalmente como esperaba.

Cualquiera puede ayudarme a explicar esto, ¿por qué no tienen los mismos comportamientos? Gracias, Hoang

margin-auto solo funciona en margen horizontal. es decir, margin-left and right .

No hay forma de que pueda establecer el margen vertical en automático. en su lugar, puede convertirlo en un bloque en línea y establecerlo verticalmente en el medio. lee esta respuesta

MDN dice :

 margin: auto; /* box is horizontally centered, 0 margin on top and bottom */ 

Intenté a continuación

    Center   
Text is vertical alignment