Resumen de centrado horizontal y centrado vertical de CSS

1. Establecer margen: 0 auto;

El texto de una sola línea se centra verticalmente estableciendo la altura de la línea a la altura del elemento principal (la altura del elemento principal es conocido).

La imagen está centrada verticalmente y se establece el relleno superior e inferior (el elemento principal está sobreestimado y no configurado).

La imagen está centrada verticalmente. El siguiente método tendrá una cierta desviación (el elemento principal está sobreestimado y no configurado).

La imagen está centrada verticalmente y la imagen sirve como fondo.

1. Si el elemento es un elemento en línea a nivel de bloque, la idea básica es usar display: inline-block, vertical-align: middle y un pseudo elemento para colocar el bloque de contenido en el centro de el contenedor.

Los elementos en línea se pueden convertir en bloques en línea para lograr el centrado.