Introducción a varios métodos para lograr el centrado horizontal y vertical con CSS
CSS logra la alineación central horizontal y vertical. Es relativamente sencillo lograr el centrado horizontal en CSS. Por lo general, si desea lograr el centrado horizontal de elementos en línea o elementos de bloque en línea, puede configurar text-align: centre en su elemento principal a nivel de bloque, si desea lograr el centrado horizontal de elementos a nivel de bloque, puede configurar; magin: automático. Y si desea lograr una alineación central vertical, puede que no sea fácil.
A continuación, he resumido algunos métodos para lograr la alineación central horizontal y vertical. Si hay alguna deficiencia, por favor indíquela.
La implementación del centrado horizontal y vertical se puede dividir en dos contenidos principales, uno es que la altura cambia de forma adaptativa con el contenido y el otro es la altura fija.
El método más común para lograr el centrado horizontal y vertical con una altura fija es usar altura + altura de línea. Establezca el mismo valor y use text-align para lograr la alineación central horizontal y vertical del texto. /p>
.container {
ancho: 300px;
alto: 300px;
alto de línea: 300px;
text-align: center;
border: 1px solid red;
}Desventajas: altura fija, no se puede lograr la alineación central vertical de dos líneas de texto
El método 2 utiliza posicionamiento absoluto y se utiliza con valores de margen negativos. Puede lograr el efecto de centrado horizontal y vertical de los elementos.
.container {
posición: absoluta;
izquierda: 50%;
arriba: 50%;
margen izquierdo: -150px;
margen superior: -150px;
ancho: 300px;
alto: 300px;
borde: 1px rojo sólido;
}Por supuesto, puedes usar la función calc de CSS3 para simplificar el código CSS anterior
.container {
posición: absoluta;
izquierda: calc(50% - 150px);
arriba: calc(50% - 150px);
ancho : 300px;
altura: 300px;
borde: 1px rojo sólido;
}Desventajas: altura fija, la altura no se puede adaptar al contenido. El elemento sale del flujo de documentos.
El método 3 agrega una etiqueta vacía y hace flotar el elemento fuera del flujo del documento para evitar afectar el diseño de otros elementos.
¡hola mundo!
.space {
flotante: izquierda;
altura: 50%;
margen-top: -150px;
}
.container {
claro: ambos; p>
altura: 300px;
borde: 1px rojo sólido;
posición: relativa;
}Desventajas: centrado vertical de esta manera Se requiere una altura fija y no se puede lograr una altura adaptable al contenido. Al mismo tiempo, aparecen elementos div vacíos redundantes.
Implementación adaptable a la altura del método de centrado horizontal y vertical 1: hay un atributo de transformación en CSS3. Hay una función de movimiento de traducción debajo de este atributo. Si ambos parámetros son valores porcentuales, el movimiento se basará en su propio ancho y alto. El mecanismo de movimiento de esta función es similar a la posición: relativa.
.container {
posición: absoluta;
arriba: 50%;
izquierda: 50%;
transform: Translate(-50%, -50%); // La mitad de su propio ancho y alto
borde: 1px rojo sólido;
}Ventajas : No es necesario establecer la altura. La altura se adapta al contenido.
Desventajas: Los elementos están separados del flujo de documentos. Si el elemento que necesita centrarse ya excede la altura de la ventana gráfica, la ventana gráfica recortará su parte superior.
Método 2 Sabemos que el margen se puede utilizar para lograr la alineación central horizontal, pero la razón por la que el margen no se puede utilizar para lograr el centrado vertical es que el valor porcentual del margen se calcula en función del ancho.
.container {
ancho: 300px;
margen: 50% auto 0;
borde: 1px sólido red;
tarnsform: TranslateY(-50%);
}En el código anterior, el porcentaje se calcula en función del ancho del elemento principal (el elemento principal en este momento es el elemento del cuerpo), por lo que el 50% más el valor negativo de traducir en este momento no puede lograr un diseño centrado verticalmente.
Sin embargo, hay un vh (altura de la ventana gráfica) en CSS, que es equivalente a la altura de document.body.clientHeight o document.documentElement.clientHeight en el DOM 1vh=1%, es decir, 1vh es igual a la ventana gráfica 1% de la altura. Para problemas de compatibilidad del navegador con la unidad vh, consulte vh. Por lo tanto, el código anterior se puede cambiar al siguiente para lograr el efecto de centrado horizontal y vertical.
.container {
ancho: 300px;
margen: 50vh auto 0;
transformación: traducirY(- 50%);
borde: 1px rojo sólido;
}Método 3 Hay un diseño flexible (modelo de caja de diseño retráctil, también llamado modelo de caja de diseño elástico) en CSS3. familiarizados con flex Friends, no podría ser más fácil usar flex para lograr un centrado horizontal y vertical.
¡hola mundo!
.container {
pantalla: flex;
altura: 100vh ;
}
.inner {
margin: auto;
}Cuando hacemos que el elemento principal se muestre: flex, margin: Auto no sólo puede centrarse horizontalmente, sino también verticalmente. Esto se debe a que los márgenes automáticos dividen el espacio adicional en dos, horizontal o verticalmente.
Por supuesto, también puedes usar justify-content: center para definir la alineación del eje principal del elemento flexible y align-items: center para definir la alineación del eje lateral del elemento flexible. .
hola mundo
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}El método 4 puede usar display: table para simular la tabla y configurar el sub- visualización de elementos: table-cell, deje que se convierta en una celda de la tabla y configure vertical-align: middle para lograr un diseño centrado verticalmente
¡hola mundo!
.container {
display: table /* Deje que el div esté en; la forma de una tabla Representación del formulario*/
ancho: 100%;
borde: 1px rojo sólido;
}
. internal {
display: table-cell; /* Dejar que los elementos secundarios se representen como celdas de tabla*/
text-align: center;
vertical- align: middle;
}Con este método, no es necesario fijar la altura.
Sólo necesita dar cualquier altura o ninguna altura para lograr el efecto de centrado horizontal y vertical.