El método de centrar el frente horizontal y verticalmente.

La primera  escuela secundaria : modo de escritura

Puede consultar: https://www.runoob.com/cssref/css-pr-writing-mode.html

Este método es un poco más complicado, el modo de escritura puede cambiar la dirección de visualización del texto


El segundo tipo:  forma de tabla

Establecido por la forma de la celda de la tabla

Ventajas:  El contenido en la celda de la tabla está naturalmente centrado verticalmente, solo agregue un atributo centrado horizontalmente.

Desventajas:  Este no es el método correcto de mesa, no es muy recomendable, pero se puede lograr


El tercer tipo:  tabla-celda realiza un centrado horizontal y vertical: uso de combinación de tabla-celda en el centro medio

Establecer directamente al padre

  display: table-cell;
  vertical-align: middle;
  text-align: center;
  •  
  • Para ser obvio, podemos establecer un ancho, alto y borde.
   width: 240px;
   height: 180px;
   border:1px solid #666;

Cuarto: el  método de caja flexible

Estableciendo justify-content: center;

Alinear-elementos: centro; eso es todo

Ventajas: el  terminal móvil es flexible y de uso gratuito

Desventajas: el  terminal de PC debe juzgarse según la compatibilidad


El quinto tipo:  cuadrícula (diseño de cuadrícula)

Establecer pantalla: cuadrícula; para el padre

Establecer align-self: center; justify-self: center; para elementos secundarios

Ventajas:  menos código

Desventajas:  no es tan compatible como flex, se recomienda flex

Tabla de contenido

La primera escuela secundaria: modo de escritura

El segundo tipo: forma de tabla

El tercer tipo: tabla-celda realiza un centrado horizontal y vertical: uso de combinación de tabla-celda en el centro medio

Cuarto: el método de caja flexible

El quinto tipo: cuadrícula (diseño de cuadrícula)


Supongo que te gusta

Origin blog.csdn.net/weixin_46729085/article/details/108600888
Recomendado
Clasificación