En CSS, tienes que quejarte. Puedes usar margin: 0 auto; para lograr el centrado horizontal, pero margin: auto 0 no puede lograr el centrado vertical.
La razón principal aquí es que el control principal, es decir, el control en sí, no está colocado correctamente. Mirando directamente el código, primero debe usar el diseño relativo para el control principal, y luego debe usar el diseño absoluto para los controles secundarios y usar los atributos superior e inferior, combinados con margen: auto 0;, para lograr el efecto.
.container-vertical { posición: relativa; ancho: 100%; alto: 200px; fondo: deepskyblue; margen inferior: 20px;} .container-vertical-item { posición: absoluto; alinear: centro; fondo: amarillo; altura de línea: 80px; arriba: 0; margen: automático; 0;}Centrado verticalmente.png
Centrar horizontal y verticalmenteCon la experiencia de 5.2, podemos intentar establecer los atributos izquierdo, derecho, superior e inferior del control secundario en 0 y margin: auto; márgenes automáticos en las cuatro direcciones. Este efecto se puede lograr. Los subcontroles que deben tenerse en cuenta deben tener el atributo display: block;
Mira el código
.container-horization-vertical { posición: relativa; ancho: 100%; alto: 200px; fondo: deepskyblue; margen inferior: 20px;} .container-horization-vertical-item { posición: absoluto; 80px; fondo: amarillo; altura de línea: 80px; alineación de texto: arriba: 0; 0; abajo: 0; derecha: 0; margen: automático;}Resumen: esta solución sigue siendo muy buena a la hora de resolver algunos diseños de página no tan complejos y se puede adaptar a cualquier interfaz y a casi todos los navegadores. Pero para páginas muy complejas, es posible que se necesiten otras soluciones, pero también puedes inspirarte en esta idea.
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.