Formas de colocar bloques horizontalmente. Alineación horizontal y vertical de elementos Cómo centrar una página

Los diseñadores web utilizan DIV en su trabajo todos los días. Sin eufemismos, esta es la etiqueta más popular. Abra el código fuente de cualquier sitio web y verá que la mayoría, si no dos tercios, de los objetos están encerrados en

. Incluso con la llegada de HTML5 y la aparición de competidores serios en forma de artículo o encabezado, se sigue insertando en el marcado en todas partes. Por lo tanto, le sugiero que comprenda el tema del formateo y centrado de bloques div.

¿Qué es DIV?

El nombre del elemento proviene de la palabra inglesa division, que significa división. Al escribir marcas, se utiliza para dividir elementos en bloques. Los DIV encierran grupos de contenido en una página web. Por ejemplo, imágenes, párrafos con texto. La etiqueta no afecta de ninguna manera la visualización del contenido y no tiene ninguna carga semántica.

DIV admite todos los atributos globales. Pero para el diseño web solo necesitas dos: clase e identificación. Sólo recordarás a los demás en casos exóticos, y eso no es un hecho. El atributo align, que solía usarse para centrar o alinear divs a la izquierda, ha quedado obsoleto.

Cuándo usar DIV

Imagine que el sitio es un refrigerador y los DIV son contenedores de plástico en los que debe clasificar el contenido. No pondrías fruta en el mismo recipiente que la paté de hígado. Colocarás cada tipo de producto por separado. El contenido web se genera de manera similar.

Abra cualquier sitio web y divídalo en bloques significativos. Encabezado arriba, pie de página abajo, texto principal en el centro. En el lateral suele haber una columna más pequeña con contenido publicitario o una nube de etiquetas.

Documento

Ahora mira cada sección con más detalle. Comience con el encabezado. El encabezado del sitio tiene un logotipo independiente, navegación, encabezado de primer nivel y, a veces, un eslogan. Asigne a cada bloque semántico su propio contenedor. Esto no sólo separará los elementos del flujo, sino que también facilitará su formato. Le resultará mucho más fácil centrar un objeto en una etiqueta DIV dándole una clase o ID.

Centrar DIV usando márgenes

Al representar elementos web, el navegador considera tres propiedades: relleno, margen y borde. El relleno es el espacio entre el contenido y su borde. Margen: campos que separan un objeto de otro. La frontera son las líneas a lo largo de los bloques. Se pueden asignar a todos a la vez o sólo a un lado:

div( borde: 1px sólido #333; borde izquierdo: ninguno; )

Estas propiedades agregan espacio entre los objetos y le ayudan a alinearlos y colocarlos correctamente. Por ejemplo, si un bloque con una imagen necesita desplazarse desde el borde izquierdo al centro en un 20%, asigna un valor de margen izquierdo del 20% al elemento:

Bloquear con img (margen izquierdo: 20%;)

Los elementos también se pueden formatear utilizando sus valores de ancho y relleno negativo. Por ejemplo, hay un bloque con dimensiones de 200 px por 200 px. Primero, asignémosle una posición absoluta y movámoslo al centro un 50%.

Div( posición: absoluta; izquierda: 50%; )

Ahora, para asegurarnos de que el DIV centrado esté perfectamente posicionado, le damos un margen negativo a la izquierda igual al 50% de su ancho, es decir -100 píxeles:

Margen izquierdo: -100px;

En CSS esto se llama "eliminación de aire". Pero tiene un inconveniente importante: la necesidad de realizar cálculos constantes, lo cual es bastante difícil de hacer para elementos con varios niveles de anidamiento. Si se especifican los valores de relleno y ancho de borde, el navegador calculará de forma predeterminada las dimensiones del contenedor como la suma del grosor de los bordes, el relleno a la derecha e izquierda y el contenido mismo dentro, que puede también viene como una sorpresa.

Entonces, cuando necesite centrar un DIV, use la propiedad box-sizing con el valor border-box. Esto evitará que el navegador agregue valores de relleno y borde al ancho total del elemento DIV. Para subir o bajar un elemento, utilice también valores negativos. Pero en este caso, se pueden asignar al campo superior o inferior del contenedor.

Cómo centrar un bloque DIV usando márgenes automáticos

Esta es una manera fácil de centrar bloques grandes. Simplemente asigna el ancho del contenedor y la propiedad de margen a automático. El navegador colocará un bloque en el medio con márgenes iguales a la izquierda y a la derecha, haciendo todo el trabajo por sí mismo. Como resultado, no corre el riesgo de confundirse en los cálculos matemáticos y ahorra mucho tiempo.

Utilice el método de campo automático cuando desarrolle aplicaciones responsivas. Lo principal es asignar un valor de ancho al contenedor en em o porcentaje. El código del ejemplo anterior centrará el DIV y en cualquier dispositivo, incluidos los teléfonos móviles, ocupará el 90% de la pantalla.

Alineación mediante propiedad de visualización: bloque en línea

De forma predeterminada, los elementos DIV se consideran elementos de bloque y su valor de visualización es bloque. Para este método deberá anular esta propiedad. Sólo apto para DIV con un contenedor principal:

cualquier texto

A un elemento con la clase outside-div se le asigna una propiedad de alineación de texto con un valor de centro, que centra el texto en el interior. Pero por ahora el navegador ve el DIV anidado como un objeto de bloque. Para que la propiedad text-align funcione, el div interno debe tratarse como minúscula. Entonces, en la tabla CSS para el selector de div interno, escribe el siguiente código:

Inner-div (pantalla: bloque en línea;)

Cambia la propiedad de visualización de bloque a bloque en línea.

método de transformación/traducción

Las hojas de estilo en cascada permiten mover, sesgar, rotar y transformar elementos web a voluntad. Para ello se utiliza la propiedad transform. Los valores indican el tipo y grado de transformación deseado. En este ejemplo trabajaremos con traducir:

transformar: traducir (50%, 50%);

La función de traducción mueve un elemento desde su posición actual hacia la izquierda/derecha y hacia arriba/abajo. Se pasan dos valores entre paréntesis:

grado de movimiento horizontal;
grado de movimiento vertical.

Si es necesario mover un elemento solo a lo largo de uno de los ejes de coordenadas, después de la palabra traducir se indica el nombre del eje y entre paréntesis la cantidad del desplazamiento requerido:

Transformar: traducirY(-20%);

En algunos manuales puedes encontrar transformaciones con prefijos de proveedores:

Transformación de Webkit: traducir (50%, 50%); -ms-transform: traducir(50%, 50%); transformar: traducir (50%, 50%);

En 2018, esto ya no es necesario; la propiedad es compatible con todos los navegadores, incluidos Edge e IE.

Para poder centrar el DIV que queremos, la función de traducción CSS se escribe con un valor del 50% para el eje vertical y horizontal. Esto hará que el navegador desplace el elemento de su posición actual a la mitad de su ancho y alto. Se deben especificar las propiedades de ancho y alto:

Documento

Tenga en cuenta que el elemento al que se aplica la propiedad de transformación se mueve independientemente de los objetos que lo rodean. Por un lado, esto es conveniente, pero a veces, al moverse, el DIV puede superponerse a otro contenedor. Por lo tanto, este método de centrar componentes web se considera no estándar y se utiliza sólo en casos de extrema necesidad. Para la animación se utilizan transformaciones según todos los cánones de CSS.

Trabajar con el diseño Flexbox

Flexbox se considera una forma sofisticada de diseñar diseños web. Pero si lo dominas, te darás cuenta de que es mucho más sencillo y agradable que los métodos de formato estándar. La especificación Flexbox es una forma flexible e increíblemente poderosa de manejar elementos. El nombre del módulo se traduce del inglés como "contenedor flexible". Los valores de ancho, alto y disposición de los elementos se ajustan automáticamente, sin calcular sangrías ni márgenes.

En ejemplos anteriores, ya trabajamos con la propiedad de visualización, pero la configuramos en valores de bloque y bloque en línea. Para crear diseños flexibles usaremos display:flex. Primero necesitamos un contenedor flexible:

Para convertirlo a un contenedor flexible en tablas en cascada, escribimos:

Contenedor flexible (pantalla: flex;)

Todos los objetos anidados, pero sólo los descendientes directos, serán elementos flexibles:

Primero

Segundo

Tercero

Cuatro

Si coloca una lista dentro de un contenedor flexible, los elementos de la lista li no se consideran elementos flexibles. El diseño de Flexbox solo funcionará en ul:

Reglas para colocar elementos flexibles.

Para administrar elementos flexibles, necesita justificar contenido y alinear elementos. Dependiendo de los valores que especifique, estas dos propiedades colocan automáticamente los objetos según sea necesario. Si necesitamos centrar todos los DIV anidados, escribimos justify-content: center, align-items: center y nada más. El navegador hará el resto del trabajo por sí mismo:

Documento

Primero

Segundo

Tercero

Cuatro

Para centrar el texto en DIV que son elementos flexibles, puede utilizar la técnica estándar de alineación de texto. O puede hacer que cada DIV anidado también sea un contenedor flexible y administrar el contenido usando justify-content. Este método es mucho más racional si incluye una variedad de contenido, incluidos gráficos, otros objetos anidados, incluidas listas de varios niveles.

CSS: diseño y alineación central de las páginas del sitio

El diseño y la alineación central de las páginas del sitio web es un esfuerzo creativo y, a menudo, causa dificultades a los principiantes. Así que veamos cómo hacerlo. Digamos que queremos hacer una página con la siguiente estructura:

Nuestra página consta de cuatro bloques: encabezado, menú, contenido y pie de página. Para centrar la página, colocaremos estos cuatro bloques en un bloque principal:

encabezado del sitio

Contenido

Parte inferior del sitio

Usando esta estructura como ejemplo, consideraremos varias opciones.

Disposición y centrado de un sitio de caucho.

Al diseñar una plataforma de caucho, la principal unidad de medida utilizada es -%, porque la plataforma debe extenderse a lo ancho y ocupar todo el espacio libre.

Por lo tanto, el ancho de los bloques "encabezado" y "pie de página" será el 100% del ancho de la pantalla. Deje que el ancho del bloque "menú" sea del 30% y el bloque "contenido" debe ubicarse al lado del bloque "menú", es decir debe tener un margen izquierdo (margen izquierdo) con un ancho igual al ancho del bloque "menú", es decir treinta%.

Para que los bloques de "menú" y "contenido" estén uno al lado del otro, hagamos que el bloque de "menú" flote y lo empujemos hacia el borde izquierdo. También estableceremos los colores de fondo de nuestros bloques. Ahora escribamos todo esto en la hoja de estilo (en la página style.css)

#header( fondo:#3e4982; ancho:100%; alto:110px; text-align:center; color:#FFFFFF; tamaño de fuente:24px; padding-top:40px; ) #menu( fondo:#6173cb; float :izquierda; ancho:30%; alto:300px; alineación de texto:centro; color:#FFFFFF; tamaño de fuente:18px; padding-top:10px; ) #content( fondo:#ffffff; margen izquierdo:30% ; altura:300px; alineación de texto:centro; ) #pie de página( fondo:#3e4982; claro:ambos; ancho:100%; altura:50px; alineación de texto:centro; color:#FFFFFF; tamaño de fuente:14px; relleno-superior: 10px;)

La altura de los bloques se estableció condicionalmente para que el resultado fuera visible. Mire nuestra página en su navegador:

Si cambia el tamaño de la ventana del navegador, el ancho de todos los bloques cambiará. Esto no siempre es conveniente, porque... Cuando se estira el bloque de menú, aparece un espacio vacío. Por lo tanto, el ancho del bloque "menú" suele ser fijo, así que hagamos lo mismo. Para hacer esto, reemplace los valores de las propiedades correspondientes en la hoja de estilo:

... #menu( fondo:#6173cb; float:izquierda; ancho:200px; alto:300px; ) #content( fondo:#ffffff; margen izquierdo:200px; alto:300px; ) ...

Ahora nuestra página se extiende de forma más natural. Con el diseño fluido, las páginas ocupan todo el ancho de la pantalla, por lo que no es necesario alinear las páginas.

Pero si lo deseas, puedes hacer que tu página tenga el mismo relleno a la izquierda y a la derecha de la pantalla. Para hacer esto, necesita agregar un estilo al bloque "principal", que es un contenedor para todos los demás bloques:

Ahora nuestra página se ve así:

Disposición y centrado del sitio, ancho fijo.

En este caso, tendremos que establecer tamaños fijos para nuestros bloques:

#main( ancho:800px; ) #header( fondo:#3e4982; ancho:800px; alto:150px; alineación de texto:centro; color:#FFFFFF; tamaño de fuente:24px; padding-top:40px; ) #menú ( fondo:#6173cb; float:izquierda; ancho:200px; alto:300px; alineación de texto:centro; color:#FFFFFF; tamaño de fuente:18px; padding-top:10px; ) #content( fondo:#ffffff; margen izquierdo: 200 px; altura: 300 px; alineación de texto: centro; ) #pie de página (fondo: #3e4982; claro: ambos; ancho: 800 px; altura: 50 px; alineación de texto: centro; color: #FFFFFF; fuente- tamaño: 14 px; relleno superior: 10 px; )

Ahora nuestra página está presionada en el borde izquierdo de la pantalla.

En este caso, la alineación central de las páginas del sitio se puede realizar de la siguiente manera. Recordemos que nuestra página tiene una etiqueta "body", a la que también se le puede dar un ancho y algo de relleno.

Hagamos esto: asigne a la etiqueta "cuerpo" un ancho de 800 píxeles (como el bloque "principal") y un relleno a la izquierda del 50%. Luego, todo el contenido del bloque "principal" se mostrará en el lado derecho de la pantalla (es decir, desde el centro hacia la derecha):

Para que nuestro bloque "principal" esté ubicado en el medio de la pantalla, su centro debe coincidir con el medio de la etiqueta "cuerpo". Aquellos. debe desplazar el bloque "principal" hacia la izquierda la mitad de su tamaño. El ancho del bloque "principal" es de 800 píxeles, lo que significa que debe establecerle la propiedad "margen-izquierdo: -400px". Sí, esta propiedad puede tomar valores negativos, entonces el margen izquierdo se reduce (es decir, se desplaza hacia la izquierda). Y esto es exactamente lo que necesitamos.

La hoja de estilo ahora se ve así:

cuerpo( ancho:800px; relleno-izquierda:50%; ) #main( ancho:800px; margen-izquierdo:-400px; ) #header( fondo:#3e4982; ancho:800px; alto:150px; alineación de texto:centro ; color:#FFFFFF; tamaño de fuente:24px; padding-top:40px; ) #menu( fondo:#6173cb; float:izquierda; ancho:200px; alto:300px; alineación de texto:centro; color:#FFFFFF; tamaño de fuente:18px; padding-top:10px; ) #content( fondo:#ffffff; margen izquierdo:200px; altura:300px; text-align:center; ) #footer( fondo:#3e4982; claro: ambos; ancho:800px; alto:50px; alineación de texto:centro; color:#FFFFFF; tamaño de fuente:14px; padding-top:10px; )

Y nuestra página en el navegador se encuentra exactamente en el medio:

Analizamos dos opciones para centrar las páginas del sitio; de hecho, no son dogmas. Puede experimentar y crear su propia versión, simplemente compruebe cómo funciona en diferentes navegadores. Desafortunadamente, lo que se muestra bien en Firefox u Opera puede verse de manera completamente incomprensible en IE y viceversa. Y debemos recordar esto.

¡Buena suerte en tu búsqueda creativa!

Si este sitio le resultó útil, consulte nuestros otros

Analizamos la alineación de los elementos del bloque en CCS. Colocamos varios en el centro. DIV o LI elementos. Ofrezco varias de mis opciones para la mayoría de los casos.

Este artículo no pretende enumerar todas las opciones de alineación y reescribir lo que ya existe en alguna parte. No recuerdo por qué, pero muchas veces no estaba satisfecho con las opciones ofrecidas. O había bloques fijos, o todo se vino abajo durante el diseño adaptativo, o alguna otra deficiencia.

A veces, para alinear al centro, basta con agregar un par de atributos y no necesitas nada complicado. Por ejemplo, yo también.

A continuación se muestran varias opciones de diseño adaptativo para alinear bloques en el centro, que yo yo suelo en sus sitios web. Y si el primero es bastante común, entonces quizás algunos otros métodos ni siquiera se describan en Internet exactamente de esta manera.

Opción 1

Alineación simple de todos los bloques al centro de la página.

centrémonos Contenido UL de 4 elementos LI, que están en el bloque DIV con clase envase.

En este caso, las siguientes reglas en CSS son suficientes:

Envase (
ancho: 100%;
}

Contenedor ul (
alineación de texto: centro;
estilo de lista: ninguno;
}

Contenedor li (
pantalla: bloque en línea;
}

Obtenemos la siguiente vista: Hay 4 elementos LI centrados aquí. Cuando se reduce el tamaño de la pantalla, los elementos que no encajan se mueven hacia abajo.

si bloques LI con estas propiedades no están instaladas en el centro, lo que significa que alguna otra propiedad está interfiriendo con ellas. Por ejemplo, esta podría ser la propiedad flotador izquierdo o pantalla: mesa; o algún otro.

Ahora puede agregar otros estilos a la estructura superior (en el marco de alineación CSS básico). Por ejemplo, haga bloques de un tamaño fijo y aplique sangría entre sí:

Contenedor li (
pantalla: bloque en línea;
margen: 5px;
ancho: 100px;
}

Obtenemos lo siguiente:

Pero esta opción tiene un inconveniente. Los bloques están ubicados en el centro, pero hay enormes distancias a izquierda y derecha. Se pueden reducir cambiando el ancho.

O puede hacer contenedores del mismo tamaño para que haya sangrías solo entre los contenedores y no haya ninguna a la izquierda ni a la derecha.

Entonces eliminaremos margen y agrega el ancho de este ancho para que cubra completamente el área.

Contenedor li (
alineación vertical: arriba;
pantalla: bloque en línea;
ancho: 32,899%;
}

Habrá una pequeña zona de espacio vacío entre los bloques. Y para hacerlo aún más grande, puedes retirarte al interior usando el parámetro relleno.

En los bloques, deliberadamente no agrego nada extra para dejar exactamente aquellos estilos que afectan directamente la alineación. Pero si haces lo mismo, no obtendrás esos bloqueos. Aunque solo sea porque, en primer lugar, necesitas agregar color al bloque y, en segundo lugar, si está vacío, ponlo. altura: 100 píxeles;. Otros atributos son de tu agrado.

La última opción es:

En la captura de pantalla anterior, dejé otras áreas del sitio para que quede claro dónde están los bordes de los bloques, porque si están adyacentes al borde, entonces el borde en sí ya no es visible. Y en la imagen, los bordes blancos a izquierda y derecha son una alineación diferente que no tiene nada en común con el ejemplo en cuestión. Repito, los bloques en sí están adyacentes a los bordes, que no son visibles, porque los bloques los cubren por completo.

opcion 2

Hay muchas formas de centrar bloques. Pero si necesita hacer que la alineación sea más inteligente, debe devanarse los sesos. Afortunadamente, se me ocurrió un método interesante para los siguientes propósitos:

¿Cómo centro todos los divs para que el bloque de la siguiente línea quede alineado a la izquierda?

Contamos con la siguiente estructura:

Bloque 1

Bloque 2

Bloque 3

Bloque 4

Bloque 5

Escribimos clases para ellos:

ancho: 90%;
margen: 0 automático;
}

Artículo de archivo (
pantalla: bloque en línea;
alineación vertical: arriba;

Ancho: calc(33.3333% - (0.666666666667 * 36px));
margen: 0 10px 0 11px;
}

Tenga en cuenta que si cambia de talla cálculo, entonces necesitas ajustar experimentalmente las dimensiones. margen. De lo contrario los bloques no quedarán centrados.

Esta alineación debe hacerse a ojo. Pero si hay menos bloques en la nueva línea que en la línea de arriba, este bloque solitario estará con lado izquierdo. Y se ve mucho mejor que cuando en la siguiente línea hay un solo bloque en el centro.

Aplicando la técnica anterior conseguiremos un diseño adaptativo, con todos los bordes iguales, que no se deteriorará al cambiar el tamaño de la pantalla.

Y si queremos que la versión móvil no tenga 3 bloques, sino 2, entonces en ccs para una resolución de 768 píxeles dividiremos los bloques de otra manera:

@media pantalla y (ancho máximo: 768px) (
.artículo de archivo (
ancho: calc(47.3333% - (0.666666666667 * 25px));
margen: 0 10px 0 20px;
}
}

Consigamos los mismos bloques en la versión móvil, pero con dos bloques por línea:

Opción 3

Ahora alinearemos usando doblar. Esta puede parecer la forma ideal de subir de nivel, porque en realidad funciona de forma muy sencilla. Sin embargo, FLEX no puede realizar la tarea descrita en la opción 2. Al menos yo no pude lograr los mismos resultados.

A la siguiente sección:

Añadiendo estilos:

#cssmenú (
margen: 20px automático;
}

#cssmenu ul (
estilo de lista: ninguno;
pantalla: flexible;
envoltura flexible: envoltura;
justificar-contenido: centro;
}

#cssmenu > ul > li (
margen: 1px;
}

Obtenemos:

En el ejemplo dado:

envoltura flexible: envoltura;

Mueve los bloques a la siguiente línea si llenan el contenedor. De lo contrario, irán más allá de la ventana del navegador.

justificar-contenido: centro;

Alineamos el contenido de los bloques al centro.

Opción 4

Otra opción de alineación que utiliza tecnología flex.

Tenemos un contenedor con dos bloques en su interior. Necesitamos estos 2 bloques para dividir el ancho en dos lados iguales.

Bloque 1

Bloque 2

Para ello escribiremos las siguientes propiedades en los estilos:

Envase (
pantalla: flexible;
}

Bloquear (
base flexible: 100%;
}

Opción 5

Existe otra opción para centrar los bloques, si su número es estrictamente igual. Por ejemplo: hay 9 bloques, 3 por cada línea. Y sabes que siempre será así. Por ejemplo, está creando una página de destino y sabe con certeza que no se agregará nada innecesario al sitio entre estos bloques.

Entonces, tenemos 9 bloques del siguiente tipo (no dupliqué las líneas 9 veces, pero ten en cuenta que son 9 bloques):

Bloque 1

Bloque 2

Bloque 3

Aplicar estilos para ellos:

Contenedor-de-archivo-para-artículos (
ancho: 100%;
alineación de texto: centro;
}

Artículo de archivo (
ancho: 25%;
alineación vertical: arriba;
pantalla: bloque en línea;
alineación de texto: izquierda;
}

Artículo de archivo: nth-child (1),
.archivo-artículo:nth-child(4),
.artículo-archivo: nth-child(7) (
margen: 20px 0 30px 40px;
}

Artículo de archivo: nth-child (2),
.artículo-archivo: nth-child(5),
.artículo-archivo: nth-child(8) (
margen: 20px 40px 30px;
}

Artículo de archivo: nth-child (3),
.archivo-artículo:nth-child(6),
.artículo-archivo: nth-child(9) (
margen: 20px 40px 30px 0;
}

También obtendremos un diseño adaptable. Cuando se reduce la pantalla, el bloque que no encaja irá al centro inferior

La ventaja de este tipo de centrado es que puede realizar sangrías claras y claras entre bloques.

El principal inconveniente es que no se puede colocar nada dentro de los bloques. Cualquier elemento:

cualquiera div o pag u otra cosa, será considerado como un elemento interno enésimo niño. Como resultado, los estilos CSS se superpondrán y todas las sangrías realizadas utilizando el margen desplazarán los bloques de forma diferente a la prevista originalmente.

En CSS, algunas cosas aparentemente simples no son tan fáciles de hacer. Una de estas cosas es la alineación, es decir. cuando un elemento necesita posicionarse de cierta manera en relación con otro.

Este artículo presenta algunas soluciones listas para usar que ayudarán a simplificar el trabajo de centrar elementos horizontal y/o verticalmente.

Nota: Debajo de cada solución hay una lista de navegadores que indican las versiones en las que funciona el código CSS especificado.

CSS - Bloque de alineación central

1. Alinear un bloque con el centro de otro. En este caso, el primer y segundo bloque tienen tamaños dinámicos.

...

Padre ( posición: relativa; ) .child ( posición: absoluta; izquierda: 50%; arriba: 50%; -webkit-transform: traducir(-50%, -50%); -moz-transform: traducir(-50% , -50%); -ms-transform: traducir(-50%, -50%); -o-transform: traducir(-50%, -50%); transformar: traducir(-50%, -50%) ; )

Cromo 4.0+
Firefox 3.6+
Explorador de Internet 9+
Ópera 10.5+
Safari 3.1+

2. Alinear un bloque con el centro de otro. En este caso, el segundo bloque tiene dimensiones fijas.

Parent ( posición: relativa; ) .child ( posición: absoluta; izquierda: 50%; arriba: 50%; /* ancho y alto de 2 bloques */ ancho: 500px; alto: 250px; /* Los valores se determinan dependiendo en su tamaño */ /* margen-izquierda = - ancho / 2 */ margen-izquierda: -250px; /* margen-superior = - altura / 2 */ margen-superior: -125px; )