Formas comunes de centrar el diseño de la sección frontal vertical y horizontalmente
Se puede decir que el método de centrado en el diseño frontal es común y es necesario en casi todos los lugares. Los más comunes que tenemos son el centrado horizontal y el centrado vertical.
Centrado horizontal: El centrado horizontal consiste en organizar los elementos secundarios en la posición central horizontal del elemento principal. Veamos algunas de las más utilizadas.
1. Utilice display: inline-block y text-align: center
display: inline-block
text-align: center
El principio es configurar el contenedor secundario como un elemento de bloque en línea y luego configurar el atributo del contenedor principal para centrar el texto para lograr el propósito.
La desventaja es que el texto interior estará centrado, lo que se puede solucionar configurando el estilo por separado.
2. Utilice posición: absoluta y transformar
posición: absoluta
transformar: traducirX(-50); Primero configure el subcontenedor en posición relativa y mueva la distancia en el lado izquierdo a la mitad del ancho relativo. Esto hará que el lado izquierdo de todo el contenedor esté en la mitad de la línea y mire hacia la derecha. sub-contenedor a la mitad izquierda nuevamente para lograr el objetivo.
La desventaja es que transform es contenido css3 y tiene problemas de compatibilidad con el navegador. Cuando se conocen el ancho y el alto, la transformación se puede cambiar a la mitad de su propio ancho con el margen izquierdo establecido en negativo para lograr el mismo propósito.
4. Utilice flex y justify-content
display: flex
justify-content: center
El principio es; utilizar css3 El atributo de diseño flex convierte el subcontenedor en un estado de elemento flexible y luego usa el atributo justify-content para lograr el centrado. Este método requiere configurar estas dos propiedades para el contenedor principal.
La desventaja es que el atributo css3 tiene problemas de compatibilidad con el navegador.
Centrado vertical: El centrado vertical consiste en organizar los elementos secundarios en la posición central vertical del elemento principal. Veamos algunas de las más utilizadas.
1. Utilice display: table-cell y vertical-align
display: table-cell
vertical-align: middle
<; El principio de p> es mostrarlo convirtiendo el contenedor principal en una celda de la tabla y luego centrar el contenido de la celda de la tabla verticalmente.Al usarlo, debe establecer ambas propiedades en el contenedor principal.
2. Utilice posición: absoluta y transformar
posición: absoluta
transformar: traducirY(-50); es similar Para centrarlo horizontalmente, primero configuramos el subcontenedor en posición relativa y movemos la distancia superior a la mitad de la altura relativa. Esto hará que la parte superior de todo el contenedor parezca estar en la mitad de la línea, y debemos hacerlo. mueva el subcontenedor hacia arriba hasta la mitad del contenedor para cumplir su propósito.
La desventaja es que el atributo css3 tiene problemas de compatibilidad con el navegador. Cuando se conocen el ancho y el alto, la transformación se puede reemplazar con margin-top establecido en la mitad negativa de su propio alto para lograr el mismo propósito.
3. Utilice display: flex y align-items
display: flex
align-items: center
El principio; es Convierta el subcontenedor a un estado de elemento flexible a través del atributo de diseño CSS3 flex y luego use el atributo align-items para lograr el centrado. Este método requiere configurar estas dos propiedades para el contenedor principal.
La desventaja es que el atributo css3 tiene problemas de compatibilidad con el navegador.
Centrar horizontal y verticalmente al mismo tiempo:
En cuanto al centrado simultáneo, con los dos métodos anteriores, ¿todavía tienes miedo de que no se logre el efecto? un poco, como las siguientes combinaciones comunes:
1. Utilice posición: absoluta y margen (ancho y alto conocidos)
posición: absoluta
izquierda: 50;
arriba: 50
ancho: 100px;
alto:
margen izquierdo: -50px; ;
margin- top: -50px;
2. Utilice posición: absoluta y transforme (ancho y alto desconocidos)
posición: absoluta
izquierda: 50;
arriba: 50;
transformar: traducirX(-50);
transformar: traducirY(-50); /p>
3. Utilice posición: absoluta y margen (ancho y alto desconocidos)
posición: absoluta
izquierda:
arriba; : 0;
derecha: 0;
abajo: 0;
margen: automático
4. Utilice flex y justificar- propiedades de contenido y alineación de elementos (ancho y alto desconocidos)
display: flex
justify-content: center
align-items: center; /p>
Hablemos de problemas comunes de centrado. Esta es una técnica de uso común. Los amigos pueden investigar otras técnicas por su cuenta. Creo que hay muchas formas extrañas que también pueden lograr el efecto.