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 establece 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%; visualización: 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 estilos 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:

  • CSS
  • HTML
  • 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í, para la alineación vertical existe una propiedad especial de alineación vertical en CSS con múltiples valores. 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.
    Para ilustrarlo, considere el siguiente ejemplo.

    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 sólo es aplicable 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 (alto: 200 px; alto de línea: 200 px;). Interior (alto 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:

    1. establecer posicionamiento relativo al bloque externo y posicionamiento absoluto al bloque interno;
    2. 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;
    3. establezca el relleno vertical del bloque interior en automático.
    .outer (posición: relativa;) .inner (altura: 100px; posición: absoluta; arriba: 0; abajo: 0; margen: auto 0;)
    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é no fue posible 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: 200px; alto: 200px;) .inner (ancho: 100px; 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.

    ¡Hola! Seguimos dominando los conceptos básicos del lenguaje HTML. Veamos qué necesitas escribir para alinear el texto al centro, al ancho o a los bordes.

    Para ir al grano, veamos cómo centrar texto en HTML de tres maneras diferentes. Los dos últimos están vinculados directamente a la hoja de estilo. Puede ser un archivo CSS que se conecta a las páginas del sitio y define su apariencia.

    Método 1: trabajo directo con HTML

    En realidad es bastante simple. Vea el ejemplo a continuación.

    Alinea el párrafo al centro.

    Si necesita mover fragmentos de texto de otra manera, en lugar del parámetro "centro", ingrese los siguientes valores:

    • justificar: alinear el texto al ancho de la página;
    • derecha – en el borde derecho;
    • izquierda - a la izquierda.

    Por analogía, puedes mover el contenido que está en los encabezados (h1, h2) y el contenedor (div).

    Método 2 y 3: usar estilos

    El diseño presentado arriba se puede transformar ligeramente. El efecto será el mismo. Para hacer esto, debe escribir el código a continuación.

    Bloque de texto.

    De esta forma, el código se escribe directamente en HTML para centrar el contenido del texto.

    Existe otra forma alternativa de lograr resultados. Deberá seguir un par de pasos.

    Paso 1. En el código principal escribe

    Materiales de texto.

    Paso 2. En el archivo CSS incluido, ingrese el siguiente código:

    Rovno (alineación de texto:centro;)

    Observo que la palabra "rovno" es solo el nombre de una clase que se puede llamar de otra manera. Esto queda a criterio del programador.

    Por analogía, en HTML puedes centrar, justificar y alinear fácilmente el texto con el borde derecho o izquierdo de la página. Como puedes ver, hay mucho más de una opción para lograr tu objetivo.

    Sólo unas cuantas preguntas:

    • ¿Estás realizando un proyecto de información sin fines de lucro?
    • ¿Quieres que tu sitio web tenga una buena clasificación en los motores de búsqueda?
    • ¿Quieres obtener ingresos en línea?

    Si todas las respuestas son positivas, entonces basta con mirar un enfoque integrado para el desarrollo de sitios web. La información será especialmente útil si se ejecuta en el CMS de WordPress.

    Me gustaría señalar que sus propios sitios web son sólo una de las muchas opciones para generar ingresos pasivos o activos en Internet. Mi blog está dedicado a las oportunidades financieras en línea.

    ¿Ha trabajado alguna vez en el campo del arbitraje de tráfico, redacción publicitaria y otras áreas de actividad que generan ingresos primarios o adicionales a través de la colaboración remota? Puedes aprender sobre esto y mucho más ahora mismo en las páginas de mi blog.

    Publicaré mucha información realmente útil en el futuro. Manténgase conectado. Si lo deseas, puedes suscribirte a las actualizaciones de Workip por correo electrónico. El formulario de suscripción se encuentra a continuación.

    Todo diseñador de diseño se enfrenta constantemente a la necesidad de alinear el contenido en un bloque: horizontal o verticalmente. Hay varios buenos artículos sobre este tema, pero todos ofrecen muchas opciones interesantes, pero pocas prácticas, por lo que hay que dedicar más tiempo a resaltar los puntos principales. Decidí presentar esta información en una forma que me resulte conveniente, para no buscar más en Google.

    Alinear bloques con tamaños conocidos

    La forma más sencilla de utilizar CSS es alinear bloques que tengan una altura conocida (para alineación vertical) o un ancho (para alineación horizontal).

    Alineación usando relleno

    A veces no puedes centrar un elemento, sino agregarle bordes usando el botón " relleno".

    Por ejemplo, hay una imagen de 200 por 200 píxeles y necesita centrarla en un bloque de 240 por 300. Podemos establecer la altura y el ancho del bloque exterior = 200 píxeles y agregar 20 píxeles en la parte superior e inferior. y 50 a la izquierda y a la derecha.

    .example-wrapper1 (fondo: #535E73; ancho: 200px; alto: 200px; relleno: 20px 50px;)

    Alinear bloques absolutamente posicionados

    Si el bloque está configurado en " posición: absoluta", entonces se puede posicionar en relación con su padre más cercano con "posición: relativa". Esto requiere todas las propiedades (" arriba","bien","abajo","izquierda") del bloque interno para asignar el mismo valor, así como "margen: auto".

    *Hay un matiz: el ancho (alto) del bloque interior + el valor de izquierda (derecha, abajo, arriba) no debe exceder las dimensiones del bloque principal. Es más seguro asignar 0 (cero) a las propiedades izquierda (derecha, abajo, arriba).

    .example-wrapper2 (posición: relativa; altura: 250 px; fondo: url(space.jpg); ) .cat-king (ancho: 200 px; altura: 200 px; posición: absoluta; arriba: 0; izquierda: 0; abajo: 0; derecha: 0; margen: automático; fondo: url(king.png);

    Alineación horizontal

    Alineación usando "text-align: center"

    Para alinear texto en un bloque existe una propiedad especial " alineación de texto". Cuando se establece en " centro"Cada línea de texto se alineará horizontalmente. Para texto de varias líneas, esta solución se usa muy raramente; más a menudo, esta opción se puede encontrar para alinear tramos, enlaces o imágenes.

    Una vez tuve que crear un texto para mostrar cómo funciona la alineación del texto usando CSS, pero no se me ocurrió nada interesante. Al principio decidí copiar una rima infantil en alguna parte, pero recordé que esto podría estropear la singularidad del artículo y nuestros queridos lectores no podrán encontrarlo en Google. Y luego decidí escribir este párrafo; después de todo, el punto no está en él, sino en la alineación.

    .texto de ejemplo (alineación de texto: centro; relleno: 10px; fondo: #FF90B8;)

    Vale la pena señalar que esta propiedad funcionará no sólo para texto, sino también para cualquier elemento en línea ("display: inline").

    Pero este texto está alineado a la izquierda, pero está en un bloque centrado en relación con el contenedor.

    .example-wrapper3 (alineación de texto: centro; fondo: #FF90B8;) .inline-text (pantalla: bloque en línea; ancho: 40%; relleno: 10px; alineación de texto: izquierda; fondo: #FFE5E5;)

    Alinear bloques usando margen

    Los elementos de bloque con un ancho conocido se pueden alinear fácilmente horizontalmente configurándolos en "margen izquierdo: automático; margen derecho: automático". Generalmente se utiliza la abreviatura: " margen: 0 automático" (Se puede utilizar cualquier valor en lugar de cero). Pero este método no es adecuado para la alineación vertical.

    .lama-wrapper (alto: 200px; fondo: #F1BF88;) .lama1 (alto: 200px; ancho: 200px; fondo: url(lama.jpg); margen: 0 automático;)

    Así es como se deben alinear todos los bloques, siempre que sea posible (donde no se requiere un posicionamiento fijo o absoluto): es lo más lógico y adecuado. Aunque esto parece obvio, a veces he visto ejemplos aterradores con sangrías negativas, así que decidí aclararlo.

    Alineación vertical

    La alineación vertical es mucho más problemática; aparentemente, esto no estaba previsto en el CSS. Hay varias formas de lograr el resultado deseado, pero no todas son muy bonitas.

    Alineación con la propiedad de altura de línea

    En el caso de que solo haya una línea en un bloque, puede lograr su alineación vertical usando el botón " altura de línea" y configurarlo a la altura deseada. Para mayor confiabilidad, vale la pena configurar también "altura", cuyo valor será igual al valor de "altura de línea", porque este último no es compatible con todos los navegadores.

    .example-wrapper4 (alto de línea: 100 px; color: #DC09C0; fondo: #E5DAE1; alto: 100 px; alineación de texto: centro;)

    También es posible lograr la alineación de bloques con varias líneas. Para hacer esto, deberá usar un bloque contenedor adicional y establecerle la altura de la línea. Un bloque interno puede ser multilínea, pero debe estar "en línea". Debes aplicarle "alineación vertical: media".

    .example-wrapper5 (altura de línea: 160 px; altura: 160 px; tamaño de fuente: 0; fondo: #FF9B00;) .example-wrapper5 .text1 (pantalla: bloque en línea; tamaño de fuente: 14 px; altura de línea: 1.5; alineación vertical: medio; fondo: #FFFAF2; color: #FF9B00;

    El bloque contenedor debe tener configurado "tamaño de fuente: 0". Si no establece el tamaño de fuente en cero, el navegador agregará algunos píxeles adicionales. También tendrás que especificar el tamaño de fuente y la altura de la línea para el bloque interno, porque estas propiedades se heredan del padre.

    Alineación vertical en tablas.

    Propiedad " alineación vertical" también afecta a las celdas de la tabla. Con el valor establecido en "medio", el contenido dentro de la celda se alinea con el centro. Por supuesto, el diseño de la tabla se considera arcaico hoy en día, pero en casos excepcionales se puede simular especificando " pantalla: celda de tabla".

    Normalmente uso esta opción para la alineación vertical. A continuación se muestra un ejemplo de diseño tomado de un proyecto terminado. Lo que interesa es la imagen que está centrada verticalmente de esta manera.

    .one_product .img_wrapper (pantalla: celda de tabla; altura: 169 px; alineación vertical: medio; desbordamiento: oculto; fondo: #fff; ancho: 255 px;) .one_product img (altura máxima: 169 px; ancho máximo: 100 %; ancho mínimo: 140 px; pantalla: bloque; margen: 0 automático;

    Debe recordarse que si un elemento tiene un conjunto "flotante" distinto de "ninguno", en cualquier caso será bloque (mostrar: bloque); entonces tendrá que usar un contenedor de bloque adicional.

    Alineación con un elemento en línea adicional

    Y para elementos en línea puedes usar " alineación vertical: medio". Además, todos los elementos con " pantalla: en línea" que están en la misma línea se alinearán con una línea central común.

    Debe crear un bloque auxiliar con una altura igual a la altura del bloque principal, luego el bloque deseado estará centrado. Para ello conviene utilizar los pseudoelementos:antes o:después.

    .example-wrapper6 (altura: 300px; alineación de texto: centro; fondo: #70DAF1;) .pudge (pantalla: bloque en línea; alineación vertical: medio; fondo: url(pudge.png); color de fondo: # fff; ancho: 200px; alto: 200px; .riki (pantalla: bloque en línea; alto: 100%; alineación vertical: medio;)

    Pantalla: flexión y alineación

    Si no le importan mucho los usuarios de Explorer 8, o le importa tanto que está dispuesto a insertar un fragmento de JavaScript adicional para ellos, entonces puede usar "display: flex". Los cuadros flexibles son excelentes para solucionar problemas de alineación y simplemente escriba "margen: automático" para centrar el contenido en su interior.

    Hasta ahora, prácticamente nunca me he encontrado con este método, pero no existen restricciones especiales para ello.

    .example-wrapper7 (pantalla: flex; altura: 300px; fondo: #AEB96A;) .example-wrapper7 img (margen: auto;)

    Bueno, eso es todo lo que quería escribir sobre la alineación de CSS. ¡Ahora centrar el contenido no será un problema!

    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 establece 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%; visualización: 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 estilos 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 producción az del 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:



    Este artículo también está disponible en los siguientes idiomas: tailandés

    • Próximo

      MUCHAS GRACIAS por la información tan útil del artículo. Todo se presenta muy claramente. Parece que se ha trabajado mucho para analizar el funcionamiento de la tienda eBay.

      • Gracias a ti y a otros lectores habituales de mi blog. Sin ustedes, no habría estado lo suficientemente motivado como para dedicar mucho tiempo al mantenimiento de este sitio. Mi cerebro está estructurado de esta manera: me gusta profundizar, sistematizar datos dispersos, probar cosas que nadie ha hecho antes ni visto desde este ángulo. Es una lástima que nuestros compatriotas no tengan tiempo para comprar en eBay debido a la crisis en Rusia. Compran en Aliexpress desde China, ya que los productos allí son mucho más baratos (a menudo a expensas de la calidad). Pero las subastas en línea de eBay, Amazon y ETSY fácilmente darán a los chinos una ventaja en la gama de artículos de marca, artículos antiguos, artículos hechos a mano y diversos productos étnicos.

        • Próximo

          Lo valioso de sus artículos es su actitud personal y su análisis del tema. No abandonéis este blog, vengo aquí a menudo. Deberíamos ser muchos así. Envíame un correo electrónico Recientemente recibí un correo electrónico con una oferta de que me enseñarían cómo operar en Amazon y eBay.

    • También es bueno que los intentos de eBay de rusificar la interfaz para los usuarios de Rusia y los países de la CEI hayan comenzado a dar frutos. Después de todo, la inmensa mayoría de los ciudadanos de los países de la antigua URSS no tienen conocimientos sólidos de idiomas extranjeros. No más del 5% de la población habla inglés. Hay más entre los jóvenes. Por lo tanto, al menos la interfaz está en ruso: esto es de gran ayuda para las compras en línea en esta plataforma comercial. eBay no siguió el camino de su homólogo chino Aliexpress, donde se realiza una traducción automática (muy torpe e incomprensible, que a veces provoca risas) de las descripciones de los productos. Espero que en una etapa más avanzada del desarrollo de la inteligencia artificial, la traducción automática de alta calidad de cualquier idioma a cualquier idioma en cuestión de segundos se convierta en una realidad. Hasta ahora tenemos esto (el perfil de uno de los vendedores en eBay con una interfaz en ruso, pero una descripción en inglés):
      https://uploads.disquscdn.com/images/7a52c9a89108b922159a4fad35de0ab0bee0c8804b9731f56d8a1dc659655d60.png