Alinee el bloque con el centro css. Alineación dinámica de un elemento en la página. Alinear bloques con tamaños conocidos
Creo que muchos de ustedes que han tenido que lidiar con el diseño se han encontrado con la necesidad de alinear elementos verticalmente y conocen las dificultades que surgen al alinear un elemento con el centro.
Sí, existe una propiedad especial de alineación vertical de múltiples valores en CSS para la alineación vertical. Sin embargo, en la práctica no funciona como se esperaba. Intentemos resolver esto.
Comparemos los siguientes enfoques. Alinear usando:
- mesas,
- sangría,
- altura de línea
- extensión,
- margen negativo,
- transformar
- pseudo elemento
- caja flexible.
Hay dos elementos div, uno de ellos anidado dentro del otro. Démosles las clases correspondientes: exterior e interior.
El desafío es alinear el elemento interior con el centro del elemento exterior.
Primero, consideremos el caso en el que las dimensiones de los bloques externos e internos conocido. Agreguemos la regla display: inline-block al elemento interno y text-align: center y vertical-align: middle al elemento externo.
Recuerde que la alineación solo se aplica a elementos que tienen un modo de visualización en línea o en bloque en línea.
Establezcamos los tamaños de los bloques, así como los colores de fondo para que podamos ver sus bordes.
Exterior (ancho: 200 px; alto: 200 px; alineación de texto: centro; alineación vertical: medio; color de fondo: #ffc;) .inner (pantalla: bloque en línea; ancho: 100 px; alto: 100 px; color de fondo :#fcc)
Luego de aplicar los estilos, veremos que el bloque interior está alineado horizontalmente, pero no verticalmente:
http://jsfiddle.net/c1bgfffq/
¿Por qué sucedió esto? El caso es que la propiedad de alineación vertical afecta la alineación. el elemento en sí, no su contenido(excepto cuando se aplica a celdas de tabla). Por tanto, aplicar esta propiedad al elemento exterior no produjo nada. Además, aplicar esta propiedad a un elemento interno tampoco hará nada, ya que los bloques en línea están alineados verticalmente con respecto a los bloques adyacentes, y en nuestro caso tenemos un bloque en línea.
Existen varias técnicas para solucionar este problema. A continuación veremos más de cerca cada uno de ellos.
Alineación usando una tabla
La primera solución que me viene a la mente es sustituir el bloque exterior por una tabla de una celda. En este caso, la alineación se aplicará al contenido de la celda, es decir, al bloque interior.
http://jsfiddle.net/c1bgfffq/1/
La desventaja obvia de esta solución es que, desde un punto de vista semántico, es incorrecto utilizar tablas para la alineación. La segunda desventaja es que crear una tabla requiere agregar otro elemento alrededor del bloque exterior.
El primer inconveniente se puede eliminar parcialmente reemplazando la tabla y las etiquetas td con div y configurando el modo de visualización de la tabla en CSS.
.outer-wrapper (pantalla: tabla;) .outer (pantalla: tabla-celda;)
Sin embargo, el bloque exterior seguirá siendo una mesa con todas las consecuencias consiguientes.
Alineación mediante sangría
Si se conocen las alturas de los bloques interior y exterior, entonces la alineación se puede establecer utilizando las sangrías verticales del bloque interior mediante la fórmula: (H exterior – H interior) / 2.Exterior (alto: 200 px;) .interior (alto: 100 px; margen: 50 px 0;)
http://jsfiddle.net/c1bgfffq/6/
La desventaja de la solución es que es aplicable sólo en un número limitado de casos cuando se conocen las alturas de ambos bloques.
Alineación usando altura de línea
Si sabe que el bloque interior no debe ocupar más de una línea de texto, puede utilizar la propiedad line-height y establecerla igual a la altura del bloque exterior. Dado que el contenido del bloque interno no debe ajustarse a la segunda línea, se recomienda agregar también las reglas de espacio en blanco: nowrap y overflow: oculto.Exterior (altura: 200 px; altura de línea: 200 px;) .inner (espacio en blanco: nowrap; desbordamiento: oculto;)
http://jsfiddle.net/c1bgfffq/12/
Esta técnica también se puede utilizar para alinear texto de varias líneas si redefine el valor de altura de línea para el bloque interno y también agrega las reglas display: inline-block y vertical-align: middle.
Exterior (altura: 200 px; altura de línea: 200 px;). Interior (altura de línea: normal; pantalla: bloque en línea; alineación vertical: medio;)
http://jsfiddle.net/c1bgfffq/15/
La desventaja de este método es que se debe conocer la altura del bloque externo.
Alineación mediante "estiramiento"
Este método se puede utilizar cuando se desconoce la altura del bloque externo, pero se conoce la altura del bloque interno.Para hacer esto necesitas:
- establecer posicionamiento relativo al bloque externo y posicionamiento absoluto al bloque interno;
- agregue las reglas top: 0 y bottom: 0 al bloque interior, como resultado de lo cual se extenderá a toda la altura del bloque exterior;
- establezca el relleno vertical del bloque interior en automático.
http://jsfiddle.net/c1bgfffq/4/
La idea detrás de esta técnica es que establecer una altura para un bloque estirado y en posición absoluta hace que el navegador calcule el relleno vertical en una proporción igual si está configurado en auto.
Alineación con margen superior negativo
Este método se ha vuelto ampliamente conocido y se utiliza con mucha frecuencia. Al igual que el anterior, se utiliza cuando se desconoce la altura del bloque exterior, pero se conoce la altura del interior.Debe configurar el bloque externo en posicionamiento relativo y el bloque interno en posicionamiento absoluto. Luego debe mover el bloque interior hacia abajo la mitad de la altura de la parte superior del bloque exterior: 50% y elevarlo la mitad de su propia altura margen superior: -H interior / 2.
Exterior (posición: relativa;) .interior (altura: 100 px; posición: absoluta; superior: 50%; margen superior: -50 px;)
http://jsfiddle.net/c1bgfffq/13/
La desventaja de este método es que se debe conocer la altura de la unidad interior.
Alineación con transformación
Este método es similar al anterior, pero se puede utilizar cuando se desconoce la altura de la unidad interior. En este caso, en lugar de establecer un relleno de píxeles negativo, puede usar la propiedad de transformación y mover el bloque interno hacia arriba usando la función traducirY y un valor de -50%.Exterior ( posición: relativa; ) .inner ( posición: absoluta; superior: 50%; transformación: traducirY(-50%); )
http://jsfiddle.net/c1bgfffq/9/
¿Por qué fue imposible establecer el valor como porcentaje en el método anterior? Dado que los valores de margen porcentual se calculan en relación con el elemento principal, un valor del 50% sería la mitad de la altura del cuadro exterior y necesitaríamos elevar el cuadro interior a la mitad de su propia altura. La propiedad transform es perfecta para esto.
La desventaja de este método es que no se puede utilizar si la unidad interior tiene un posicionamiento absoluto.
Alineación con Flexbox
La forma más moderna de alineación vertical es utilizar Flexible Box Layout (conocido popularmente como Flexbox). Este módulo le permite controlar de manera flexible la posición de los elementos en la página, organizándolos casi en cualquier lugar. La alineación central para Flexbox es una tarea muy sencilla.El bloque exterior debe configurarse para mostrar: flex y el bloque interior para margin: auto . ¡Y eso es todo! Hermoso, ¿no?
Exterior (pantalla: flex; ancho: 200 px; alto: 200 px;) .inner (ancho: 100 px; margen: automático;)
http://jsfiddle.net/c1bgfffq/14/
La desventaja de este método es que Flexbox sólo es compatible con los navegadores modernos.
¿Qué método debo elegir?
Debe comenzar desde el planteamiento del problema:- Para alinear texto verticalmente, es mejor utilizar sangrías verticales o la propiedad de altura de línea.
- Para elementos absolutamente posicionados con una altura conocida (por ejemplo, iconos), el método con una propiedad de margen superior negativo es ideal.
- Para casos más complejos, cuando se desconoce la altura del bloque, es necesario utilizar un pseudoelemento o la propiedad de transformación.
- Bueno, si tienes tanta suerte que no necesitas admitir versiones anteriores del navegador IE, entonces, por supuesto, es mejor usar Flexbox.
Etiquetas: Agregar etiquetas
Centrar elementos verticalmente usando CSS es una tarea que presenta cierta dificultad para los desarrolladores. Sin embargo, existen varios métodos para solucionarlo, que son bastante sencillos. Esta lección presenta 6 opciones para centrar contenido verticalmente.
Comencemos con una descripción general del problema.
Problema de centrado vertical
El centrado horizontal es muy sencillo y fácil. Cuando el elemento centrado está en línea, usamos la propiedad de alineación relativa al elemento principal. Cuando el elemento está a nivel de bloque, configuramos su ancho y la configuración automática de los márgenes izquierdo y derecho.
La mayoría de las personas, cuando utilizan la propiedad text-align:, se refieren a la propiedad vertical-align para el centrado vertical. Todo parece bastante lógico. Si ha utilizado plantillas de tablas, probablemente haya hecho un uso extensivo del atributo valign, lo que refuerza la creencia de que la alineación vertical es la forma correcta de resolver el problema.
Pero el atributo valign sólo funciona en las celdas de la tabla. Y la propiedad de alineación vertical es muy similar. También afecta a las celdas de la tabla y a algunos elementos en línea.
El valor de la propiedad de alineación vertical es relativo al elemento en línea principal.
- En una línea de texto, la alineación es relativa a la altura de la línea.
- La celda de la tabla utiliza alineación relativa a un valor calculado mediante un algoritmo especial (normalmente la altura de la fila).
Pero desafortunadamente, la propiedad de alineación vertical no funciona en elementos a nivel de bloque (por ejemplo, párrafos dentro de un elemento div). Esta situación puede llevar a creer que no existe solución al problema del alineamiento vertical.
Pero existen otros métodos para centrar elementos de bloque, cuya elección depende de lo que se centra en relación con el contenedor exterior.
Método de altura de línea
Este método funciona cuando desea centrar verticalmente una línea de texto. Todo lo que tienes que hacer es configurar la altura de la línea para que sea mayor que el tamaño de fuente.
De forma predeterminada, el espacio en blanco se distribuirá uniformemente en la parte superior e inferior del texto. Y la línea quedará centrada verticalmente. A menudo, la altura de la línea se iguala a la altura del elemento.
HTML:
CSS:
#niño (altura de línea: 200px;)
Este método funciona en todos los navegadores, aunque sólo se puede utilizar para una línea. El valor 200 px en el ejemplo se eligió arbitrariamente. Puede utilizar cualquier valor mayor que el tamaño de fuente del texto.
Centrar una imagen usando la altura de línea
¿Qué pasa si el contenido es una imagen? ¿Funcionará el método anterior? La respuesta está en una línea más de código CSS.
HTML:
CSS:
#parent (altura de línea: 200px;) #parent img (alineación vertical: medio;)
El valor de la propiedad line-height debe ser mayor que la altura de la imagen.
Método de tabla CSS
Se mencionó anteriormente que la propiedad de alineación vertical se usa para celdas de tablas, donde funciona muy bien. Podemos mostrar nuestro elemento como una celda de tabla y usar la propiedad de alineación vertical para centrar verticalmente el contenido.
Nota: No es lo mismo una tabla CSS que una tabla HTML.
HTML:
CSS:
#parent (pantalla: tabla;) #child (pantalla: tabla-celda; alineación vertical: medio;)
Configuramos la salida de la tabla en el elemento div principal y generamos el elemento div anidado como una celda de la tabla. Ahora puede utilizar la propiedad de alineación vertical en el contenedor interior. Todo lo que contenga estará centrado verticalmente.
A diferencia del método anterior, en este caso el contenido puede ser dinámico ya que el elemento div cambiará de tamaño según su contenido.
La desventaja de este método es que no funciona en versiones anteriores de IE. Debe utilizar la propiedad display: inline-block para el contenedor anidado.
Posicionamiento absoluto y márgenes negativos
Este método también funciona en todos los navegadores. Pero requiere que al elemento que se centra se le dé una altura.
El código de ejemplo realiza el centrado horizontal y vertical al mismo tiempo:
HTML:
CSS:
#parent (posición: relativa;) #child ( posición: absoluta; arriba: 50%; izquierda: 50%; altura: 30%; ancho: 50%; margen: -15% 0 0 -25%; )
Primero, configuramos el tipo de posicionamiento del elemento. A continuación, configuramos las propiedades superior e izquierda del elemento div anidado al 50%, que corresponde al centro del elemento principal. Pero el centro es la esquina superior izquierda del elemento anidado. Por lo tanto, debe levantarlo (la mitad de la altura) y moverlo hacia la izquierda (la mitad del ancho), y luego el centro coincidirá con el centro del elemento padre. Por lo que en este caso es necesario conocer la altura del elemento. Luego configuramos el elemento con márgenes superior e izquierdo negativos iguales a la mitad de la altura y el ancho, respectivamente.
Este método no funciona en todos los navegadores.
Posicionamiento absoluto y estiramiento.
El código de ejemplo realiza un centrado vertical y horizontal.
HTML:
CSS:
#parent (posición: relativa;) #child ( posición: absoluta; arriba: 0; abajo: 0; izquierda: 0; derecha: 0; ancho: 50%; alto: 30%; margen: automático; )
La idea detrás de este método es extender el elemento anidado a los 4 bordes del elemento principal estableciendo las propiedades superior, inferior, derecha e izquierda en 0.
Configurar los márgenes para que se generen automáticamente en todos los lados establecerá valores iguales en los 4 lados y centrará nuestro elemento div anidado en su elemento principal.
Desafortunadamente, este método no funciona en IE7 y versiones inferiores.
Espacios iguales arriba y abajo
En este método, el relleno igual se establece explícitamente encima y debajo del elemento principal.
HTML:
CSS:
#padre (relleno: 5% 0; ) #niño (relleno: 10% 0; )
El código CSS de ejemplo establece el relleno superior e inferior para ambos elementos. Para un elemento anidado, configurar el relleno servirá para centrarlo verticalmente. Y el relleno del elemento principal centrará el elemento anidado dentro de él.
Se utilizan unidades de medida relativas para cambiar el tamaño de los elementos dinámicamente. Y para unidades de medida absolutas tendrás que hacer cálculos.
Por ejemplo, si el elemento principal tiene una altura de 400 px y el elemento anidado es de 100 px, entonces se necesitan 150 px de relleno en la parte superior e inferior.
150 + 150 + 100 = 400
Usar % le permite dejar los cálculos al navegador.
Este método funciona en todas partes. La desventaja es la necesidad de realizar cálculos.
Nota: Este método funciona configurando el relleno exterior de un elemento. También puedes utilizar márgenes dentro de un elemento. La decisión de utilizar márgenes o relleno debe tomarse dependiendo de las características específicas del proyecto.
div flotante
Este método utiliza un elemento div vacío que flota y ayuda a controlar la posición de nuestro elemento anidado en el documento. Tenga en cuenta que el div flotante se coloca antes de nuestro elemento anidado en el código HTML.
HTML:
CSS:
#parent (alto: 250px;) #floater ( float: izquierda; alto: 50%; ancho: 100%; margen inferior: -50px; ) #child ( claro: ambos; alto: 100px; )
Desplazamos el div vacío hacia la izquierda o hacia la derecha y establecemos su altura al 50% de su elemento principal. De esta manera llenará la mitad superior del elemento padre.
Dado que este div es flotante, se elimina del flujo normal del documento y necesitamos desenvolver el texto en el elemento anidado. El ejemplo usa clear: Both , pero es suficiente usar la misma dirección que el desplazamiento del elemento div flotante vacío.
El borde superior de un elemento div anidado está directamente debajo del borde inferior de un elemento div vacío. Necesitamos mover el elemento anidado hacia arriba la mitad de la altura del elemento vacío flotante. Para resolver el problema, utilice un valor de propiedad de margen inferior negativo para un elemento div flotante vacío.
Este método también funciona en todos los navegadores. Sin embargo, usarlo requiere un elemento div vacío adicional y conocimiento de la altura del elemento anidado.
Conclusión
Todos los métodos descritos son fáciles de usar. La dificultad es que ninguno de ellos es adecuado para todos los casos. Es necesario analizar el proyecto y elegir el que mejor se adapte a los requisitos.
Del autor: Te doy la bienvenida nuevamente a las páginas de nuestro blog. En el artículo de hoy me gustaría hablar sobre varias técnicas de alineación que se pueden aplicar tanto a los bloques como a su contenido. En particular, cómo alinear bloques en CSS, así como la alineación de texto.
Alinear bloques al centro
En CSS, centrar un bloque es fácil. Esta es la técnica más conocida para muchos, pero me gustaría hablar de ella ahora mismo, antes que nada. Esto significa alineación centrada horizontalmente con respecto al elemento principal. ¿Cómo se hace? Digamos que tenemos un contenedor y nuestro sujeto experimental está en él:
< div id = "wrapper" > < div id = "header" > < / div > < / div > |
Supongamos que este es el encabezado del sitio. No se extiende por todo el ancho de la ventana y debemos centrarlo. Escribimos así:
#encabezamiento( ancho/máximo-ancho: 800px; margen: 0 automático; |
Necesitamos especificar el ancho exacto o máximo y luego escribir la propiedad clave: margen: 0 auto. Establece los márgenes exteriores de nuestro encabezado, el primer valor determina los márgenes superior e inferior, y el segundo determina los márgenes derecho e izquierdo. El valor auto le dice al navegador que calcule automáticamente el relleno en ambos lados para que el elemento esté exactamente centrado en su padre. ¡Cómodo!
Alineación de texto
Esta también es una técnica muy sencilla. Para alinear todos los elementos en línea, puede usar la propiedad text-align y sus valores: izquierda, derecha, centro. Este último centra el texto, que es lo que necesitamos. Incluso puedes alinear una imagen de la misma manera, porque también es un elemento en línea por defecto.
Alinear el texto verticalmente
Pero esto es más complicado. De forma predeterminada, no existe una propiedad simple y conocida que centre fácilmente el texto verticalmente en un contenedor de bloques. Sin embargo, existen varias técnicas que los maquetadores han ideado a lo largo de los años.
Establezca la altura del bloque usando relleno. La forma no es establecer una altura explícita usando la altura, sino crearla artificialmente usando rellenos en la parte superior e inferior, que deberían ser iguales. Creemos cualquier bloque y escribamos en él las siguientes propiedades:
div(fondo: #ccc; relleno: 30px 0; )
div( antecedentes: #ccc; relleno: 30px 0; |
El fondo es sólo para mostrar visualmente los bordes y el relleno. Ahora la altura del bloque se compone de estas dos sangrías y la línea misma, y todo se ve así:
Defina la altura de línea para el bloque. Creo que esta es una forma más correcta si necesitas alinear una línea de texto. Con él, puedes escribir la altura de forma normal, usando la propiedad de altura. Después de eso, también necesita establecer la altura de la línea, la misma que la altura del bloque en su conjunto.
div (altura: 60 px; altura de línea: 60 px;)
div( altura: 60 píxeles; altura de línea: 60 px; |
El resultado será similar a la imagen de arriba. Todo funcionará incluso si agrega relleno. Sin embargo, sólo para una línea. Si necesita más texto en el elemento, este método no funcionará.
Convierte un bloque en una celda de tabla. La esencia de este método es que la celda de la tabla tiene la propiedad vertical-align: middle, que centra el elemento verticalmente. En consecuencia, en este caso el bloque debe configurarse de la siguiente manera:
div (pantalla: celda de tabla; alineación vertical: medio;)
div( mostrar: tabla - celda; alineación vertical: medio; |
Este método es bueno porque puedes alinear todo el texto que quieras en el centro. Pero es mejor escribir display: table en el bloque en el que está anidado nuestro div; de lo contrario, es posible que no funcione.
Bueno, aquí llegamos a la última técnica de hoy: esta es la alineación vertical de los propios bloques. Hay que decir que, una vez más, no existe ninguna propiedad destinada específicamente a esto, pero hay algunos trucos que debes conocer.
Establezca sangrías como porcentaje. Si conoce la altura de un elemento principal y coloca otro elemento de bloque dentro de él, puede centrarlo usando un porcentaje de relleno. Por ejemplo, el padre tiene una altura de 600 píxeles. Colocas un bloque en él que tiene 300 píxeles de alto. ¿Cuánto necesitas retroceder en la parte superior e inferior para centrarlo? 150 píxeles cada uno, que es el 25% de la altura de los padres.
Este método permite la alineación sólo cuando las dimensiones permiten realizar cálculos. Y si tu padre tiene 887 píxeles de altura, entonces no podrás registrar nada con precisión, esto ya está claro.
Insertar un elemento en una celda de la tabla. Nuevamente, si transformamos el elemento principal en una celda de la tabla, el bloque insertado en él se centrará automáticamente verticalmente. Para hacer esto, el padre solo necesita configurar vertical-align: middle.
Y si, además de esto, también escribimos margen: 0 auto, ¡entonces el elemento quedará centrado horizontalmente!
Muy a menudo la tarea es alinear un bloque en el centro de la página/pantalla, y aun así sin un script Java, sin establecer dimensiones rígidas o sangrías negativas, y para que las barras de desplazamiento funcionen para el padre si el bloque excede su tamaño. . En Internet hay muchos ejemplos monótonos sobre cómo alinear un bloque con el centro de la pantalla. Como regla general, la mayoría de ellos se basan en los mismos principios.
A continuación se detallan las principales formas de resolver el problema, sus pros y sus contras. Para comprender la esencia de los ejemplos, recomiendo reducir el alto/ancho de la ventana de resultados en los ejemplos de los enlaces proporcionados.
Opción 1: sangría negativa.
Posicionamiento bloquear utilizando los atributos superior e izquierdo en un 50% y conociendo la altura y el ancho del bloque de antemano, establezca un margen negativo, que es igual a la mitad del tamaño bloquear. Una gran desventaja de esta opción es que es necesario contar las sangrías negativas. También bloquear no se comporta del todo correctamente cuando está rodeado de barras de desplazamiento; simplemente se corta porque tiene márgenes negativos.
Padre (ancho: 100%; alto: 100%; posición: absoluta; arriba: 0; izquierda: 0; desbordamiento: automático;) .block (ancho: 250px; alto: 250px; posición: absoluta; arriba: 50%; izquierda : 50%; margen: -125px 0 0 -125px; img (ancho máximo: 100%; alto: automático; visualización: bloque; margen: 0 automático; borde: ninguno; ) )
Opción 2. Sangría automática.
Menos común, pero similar al primero. Para bloquear Establecemos el ancho y el alto, colocamos los atributos arriba a la derecha, abajo a la izquierda en 0 y configuramos el margen automático. La ventaja de esta opción es que funcionan las barras de desplazamiento. padre, si este último tiene 100% de ancho y alto. La desventaja de este método es el ajuste rígido de las dimensiones.
Padre (ancho: 100%; alto: 100%; posición: absoluta; arriba: 0; izquierda: 0; desbordamiento: automático;) .block (ancho: 250px; alto: 250px; posición: absoluta; arriba: 0; derecha: 0; abajo: 0; izquierda: 0; margen: automático; img (ancho máximo: 100%; alto: automático; visualización: bloque; margen: 0 automático; borde: ninguno;)
Opción 3. Mesa.
preguntemos padre estilos de tabla, celda padre Establece la alineación del texto al centro. A bloquear Configuramos el modelo de bloque de líneas. Las desventajas que tenemos son las barras de desplazamiento que no funcionan y, en general, la estética de la “emulación” de la tabla no lo es.
Padre ( ancho: 100%; alto: 100%; pantalla: tabla; posición: absoluta; arriba: 0; izquierda: 0; > .inner ( pantalla: tabla-celda; alineación de texto: centro; alineación vertical: medio; ) ) .block ( mostrar: bloque en línea; img ( mostrar: bloque; borde: ninguno; ) )
Para agregar un pergamino a este ejemplo, deberá agregar un elemento más al diseño.
Ejemplo: jsfiddle.net/serdidg/fk5nqh52/3.
Opción 4. Pseudoelemento.
Esta opción carece de todos los problemas enumerados en los métodos anteriores y también resuelve los problemas originales. El caso es que padre establecer estilos pseudo elemento antes, es decir, 100% de altura, alineación central y modelo de bloque en línea. Es lo mismo con bloquear Se coloca un modelo de bloque de líneas, centrado. A bloquear no "cayó" bajo pseudo elemento, cuando las dimensiones del primero son mayores que padre, indicar padre espacio en blanco: nowrap y tamaño de fuente: 0, después de lo cual bloquear cancele estos estilos con lo siguiente: espacio en blanco: normal. En este ejemplo, se necesita font-size: 0 para eliminar el espacio resultante entre padre Y bloquear debido al formato del código. El espacio se puede eliminar de otras formas, pero se considera mejor simplemente evitarlo.
Padre (ancho: 100%; alto: 100%; posición: absoluta; arriba: 0; izquierda: 0; desbordamiento: automático; espacio en blanco: nowrap; alineación de texto: centro; tamaño de fuente: 0; &:antes ( altura: 100%; pantalla: bloque en línea; alineación vertical: medio; contenido: "";
O, si necesita que el padre ocupe solo el alto y el ancho de la ventana, y no toda la página:
Padre (posición: fija; arriba: 0; derecha: 0; abajo: 0; izquierda: 0; desbordamiento: automático; espacio en blanco: nowrap; alineación de texto: centro; tamaño de fuente: 0; &:antes (altura: 100%; pantalla: bloque en línea; alineación vertical: medio; contenido: "" (pantalla: bloque; borde: ninguno;))
Opción 5. Caja flexible.
Una de las formas más sencillas y elegantes es utilizar flexbox. No requiere movimientos corporales innecesarios, describe con bastante claridad la esencia de lo que está sucediendo y es muy flexible. Lo único que vale la pena recordar al elegir este método es la compatibilidad con IE desde la versión 10 inclusive. caniuse.com/#feat=flexbox
Padre (ancho: 100%; alto: 100%; posición: fija; arriba: 0; izquierda: 0; pantalla: flex; align-items: center; align-content: center; justify-content: center; overflow: auto; ) .block (fondo: #60a839; img (pantalla: bloque; borde: ninguno;))
Opción 6. Transformar.
Adecuado si estamos limitados por la estructura y no hay forma de manipular el elemento padre, pero el bloque necesita estar alineado de alguna manera. La función CSS Translate() vendrá al rescate. Un valor de posicionamiento absoluto del 50% ubicará la esquina superior izquierda del bloque exactamente en el centro, luego un valor de traducción negativo moverá el bloque en relación con sus propias dimensiones. Tenga en cuenta que pueden aparecer efectos negativos en forma de bordes borrosos o estilo de fuente. Además, este método puede generar problemas al calcular la posición del bloque usando java-script. A veces, para compensar la pérdida del 50% del ancho debido al uso de la propiedad izquierda de CSS, se puede utilizar la regla especificada para el bloque. ayuda: margen derecho: -50%;
Padre (ancho: 100%; alto: 100%; posición: fija; arriba: 0; izquierda: 0; desbordamiento: automático;) .block (posición: absoluta; arriba: 50%; izquierda: 50%; transformar: traducir( -50%, -50%); img (pantalla: bloque; ) )
Opción 7. Botón.
Opción de usuario donde bloquear enmarcado en una etiqueta de botón. El botón tiene la propiedad de centrar todo lo que hay dentro de él, es decir, los elementos del modelo en línea y de bloque en línea (bloque en línea). En la práctica no recomiendo usarlo.
Padre (ancho: 100%; alto: 100%; posición: absoluta; arriba: 0; izquierda: 0; desbordamiento: automático; fondo: ninguno; borde: ninguno; contorno: ninguno; ) .block (display: inline-block; img (pantalla: bloque;; borde: ninguno; ) )
Prima
Usando la idea de la cuarta opción, puede establecer márgenes externos para bloquear, y este último se mostrará adecuadamente rodeado de barras de desplazamiento.Ejemplo: jsfiddle.net/serdidg/nfqg9rza/2.
También puedes alinear la imagen al centro, y si la imagen es más grande padre, escale al tamaño padre.
Ejemplo: jsfiddle.net/serdidg/nfqg9rza/3.
Ejemplo con una imagen grande:
La alineación de elementos horizontal y verticalmente se puede realizar de varias formas. La elección del método depende del tipo de elemento (bloque o en línea), el tipo de posicionamiento, tamaño, etc.
1. Alineación horizontal con el centro del bloque/página
1.1. Si se especifica el ancho del bloque:
div ( ancho: 300px; margen: 0 auto; /*centrar el elemento horizontalmente dentro del bloque principal*/ )Si desea alinear un elemento en línea de esta manera, debe configurarlo para mostrar: bloque;
1.2. Si un bloque está anidado dentro de otro bloque y su ancho no está especificado/especificado:
1.3. Si el bloque tiene un ancho y necesita estar centrado en su bloque principal:
1.4. Si los bloques no tienen un ancho especificado, puedes centrarlos usando un bloque contenedor principal:
2. Alineación vertical
2.1. Si el texto ocupa una línea, por ejemplo, para botones y elementos de menú:
.botón (alto: 50px; alto de línea: 50px;)2.2. Para alinear verticalmente un bloque dentro de un bloque principal:
2.3. Alineación vertical por tipo de mesa:
2.4. Si un bloque tiene un ancho y alto determinados y necesita estar centrado en su bloque principal:
2.5. Posicionamiento absoluto en el centro de la página/bloque mediante transformación CSS3:
si se especifican dimensiones para el elemento
div ( ancho: 300px; /*establecer el ancho del bloque*/ altura:100px; /*establecer la altura del bloque*/ transformar: traducir(-50%, -50%); posición: absoluta; arriba: 50 %; izquierda: 50% ;
si el elemento no tiene dimensiones y no está vacío
