Centrando al centro con Css: (casi) Todas las formas conocidas para hacerlo (24)

Por Kseso 53 Comentarios

Ampliado 08/013: 24 formas totalmente distintas de centrar elementos con css: en la horizontal, la vertical o ambas. Elementos de bloque, línea, posiciones absolutas, relativas, de tamaños conocidos o ignorados a priori, cajas, textos, imágenes...

Ampliado: Agosto de 2013

centrar cssPocas cuestiones como el tema de centrar suscitan tantas y tan variadas consultas por quienes se inician en Css. Bueno, y no tan iniciáticos. Este tema suele ser fuente de múltiples frustraciones. Y en la mayoría de los casos el error inicial es no pararse a pensar en qué tipo de elemento se pretende centrar y qué propiedades tiene.

Al plantearse centrar un elemento con css hay que tener claro como cuestión preliminar si es un elemento de bloque o si es de línea, si a priori se conocen sus dimensiones y en qué unidad están definidas (absoluta o relativa) y las de su contenedor. Sin olvidar que no es lo mismo el centrado en X (horizontal) que en el eje Y (vertical). Y por supuesto, no confundir que no es lo mismo centrar un contenedor respecto a su ancestro que su contenido.

Así que vamos a ver diferentes formas (16) 24 de centrar una caja con Css.
¡Ah! Se me olvidaba una obviedad, pero creo necesario apuntarla:

Sólo se puede centrar un elemento dentro de otro cuando su tamaño es inferior al de la caja que lo contiene. Sí, es demasiado obvio, pero ya me he encontrado con algún caso de querer centrar cajas con mayor tamaño o igual al de su contenedor.

Centrado horizontal de elementos

El caso más sencillo es el de una caja, elemento de bloque, del que conocemos su anchura, que queremos centrar en la horizontal de la ventana (u otro bloque).
Lo primero declaramos unos estilos básicos para visualizarla. Utilizo el elemento amarillo con la cuadrícula como elemento en el que hacer el centrado:

.caja { background: #D5CABF; border: 2px solid #fff; width: 200px; }

Centrado horizontal con anchuras fijas y conocidas:

Como ves, la posición natural (sin altrear el flujo) de un elemento es la esquina superior izquierda de su padre. Para centrarla en la horizontal sólo necesitamos utilizar el valor auto de la propiedad margin. Dicho valor significa que el espacio del padre no ocupado por el hijo se reparte mitad a su izquierda y mitad a su derecha.
Nuestro Css y resultado sería el siguiente:

.caja { width: 200px; margin: 0 auto; }

Fíjate bien:
En ningún lugar menciono el uso de text-align: center contrarrestado por una alineación posterior a la izquierda y la familia de los IE.
NO SE NECESITA
O mejor dicho. Sólo hay una situación y un navegador donde sería necesario utilizar esa combinación de declaraciones: ausencia de doctype en ie6. Así que mejor no cometer la burrada de no usar doctype.

Centrado horizontal anchura relativas:

La técnica anterior de margin: 0 auto; también es efectiva si la anchura de la caja a centrar está definida en valores relativos, por ejemplo en %:

.caja { width: 60%; margin: 0 auto; }

Fíjate bien, lo que estamos haciendo es centrar la caja respecto a su contenedor, no los contenidos.

Centrado horizontal sin anchura declarada

En los casos que no queremos/podemos definir una anchura a la caja a centrar, podemos recurrir a definir los márgenes laterales. El valor de la anchura por defecto es auto, que significa que ocupará toda la anchura disponible de su padre. Y en el modelo estándar de cajas de la anchura del padre primero se restará el margen y border del hijo, así como el padding y el resto será la anchura del hijo:

.caja { padding: 1em 3em; margin: 1em 25%; }

Recuerda que cuando se utilizan anchuras en % es conveniente declarar las propiedades max/min-width para prevenir los colapsos o desbordamientos.

Centrado de elementos posicionados

Hasta ahora, en todos los ejemplos hemos usado sólo el margen para desplazar un elemento del lugar que le correspondería ocupar. Pero para lograr lo mismo, Css también tiene las propiedades de posicionamiento (top/right/bottom/left) que pueden ser utilizadas en los elementos posicionados (positionstatic;).
Antes de continuar, recuerda que los elementos con position:relative; que son desplazados con estas propiedades, para los demás es como si no hubiesen sido movidos. Los ven y se comportan como si estuviesen en la posición original. Ve las explicaciones y ejemplos en el enlace anterior.

Doble Centrado en X e Y: posición absoluta y medidas conocidas

Si se conocen las medidas tanto del padre como del hijo, podemos utilizar la propiedad de posicionamiento para centrar al hijo. Para hacerlo fácil hay una fórmula que puedes usar:
left = (AnchuraPadre - AnchuraHijo) / 2 Y lo mismo para top con las alturas.
Vamos con un ejemplo:

.padre { position: relative; width: 400px; height: 300px; } .hijo { position: absolute; /* podría ser relative */ width: 200px; height: 200px; }

Según la fórmula anterior, para el centrador horizontal, calculamos el valor de left= (400px-200px)/2= 100px
y para el centrado vertical el valor de top= (300-200)/2=50px
Así que el css para el centrado horizontal y vertical del hijo quedaría así:

.hijo { position: absolute; /* podría ser relative */ width: 200px; height: 200px; left: 100px; top: 50px; }

y el resultado:

Este método funciona utilizando la misma unidad para los valores (por ejemplo en % en vez de px). Recuerda que el % se calcula sobre el valor del padre (declarado o computado).

style="width: 50%; height: 200px;
width: 60%; height: 100px; left: 20%; /*(100%-60%)/2*/ top: 50px;

Doble centrado sin márgenes negativos con posición absoluta

Añadido: Agosto de 2013

Simple y genial, esta obra que vi en Jsfiddle. Es tan sencilla que parece mentira que nadie hasta ahora lo haya descubierto.

Pese a que en la vertical el valor 'auto' para 'margin' no surte efecto, al actuar sobre una caja con tamaños declarado y estar posicionada a 0 en las cuatro propiedades (left/top/right/bottom) la magia ocurre.

Una realización más compleja y explicada [ing] la tienes en este pen

Doble centrado. Padre medidas "fluidas".

Un caso particular de los anteriores se presenta cuando se desconocen las medidas del padre (por ejemplo la ventana del navegador) y las del hijo son conocidas, ya sean en valores absolutos o relativos.
En estos casos se vuelve a recurrir a posicionar el elemento al centro y compensar su posición con márgenes en negativo. Recuerda que al posicionar un elemento, se hace tomando como punto de colocación no el centro de la caja que se desplaza, sino la esquina correspondiente a la propiedad utilizada. Así si es top: 50% el punto es la esquina superior izquierda.

Aquí también podemos utilizar una fórmula para calcular el valor del margen lateral a utilizar:
margin-left = -(AnchuraHijo /2)||margin-top = -(AlturaHijo /2)

.hijo { position: absolute; left: 50%; top: 50%; width: 400px; height: 200px; margin: -100px 0 0 -200px; }
.hijo { width: 400px; height: 200px; left: 50%; top: 50%; margin: -100px 0 0 -100px; }

Con este método debes tener mucho cuidado. ¿Recuerdas qué ocurre con los elementos sacados del flujo?
Imagina que el .hijo tiene una anchura de 700px. Como su margen será de -350px no habrá problemas siempre que su .padre (la ventana de navegador por ejemplo) sea mayor de 700+350=1050px. A tamaños menores el .hijo ya no será visible. Si redimensionas la pantalla a 800px se perderán 250.

Doble centrado medidas desconocidas con transform

NUEVO MAYO 2013

Una variante del anterior para los casos en que se desconocen las medidas del hijo es recurrir a las transform

¡Mira mamá! centrado!
.centrado { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

Doble centrado múltiples elementos en tamaños desconocidos o ventanas dinámicas

NUEVO: 01/2013

Esta forma solventa el problema anterior, ya que no se necesita ningún margen lateral negativo ni superior tan grande. Además añade la ventaja de que no se necesita conocer de antemano los tamaños de los elementos a centrar:

Puedes verlo en este pen o este fiddle:

La clave está en la relación entre el valor en negativo del margen superior de la lista (es el elemento seleccionado para el ejemplo) y el line-height de los enlaces que conforman el menú (los elementos que se centran.

Doble centrado con la propiedad calc

NUEVO: 12/2012

Aunque de momento el soporte a la propiedad calc() es limitada, con ella se puede lograr un doble centrado (vertical y horizontal) de forma rápida y sencilla:

.calc { height: 12rem; width: 14rem; position: absolute; left: calc(50% - 7rem); top: calc(50% - 6rem); }

Centrado de Texto

Para el centrado horizontal de texto, ya esté contenido en un párrafo (p), en un hnº o en cualquier elemento de bloque, basta con utilizar la propiedad text-align: center; .

Doble centrado de texto

Para el centrado en X e Y de una sola línea podemos utilizar la propiedad line-height, dándole un valor en función de la altura de la caja padre que la contenga:

.padre { height: 200px; } .hijo { line-height: 200px; text-align: center; }
KSESOCSS

Observa que el tamaño del texto font-size no influye. Así mismo, si en line-height se utilizan unidades relativas (em, %...) el cómputo se realiza sobre el tamaño de la tipografía (f-size). Por lo tanto, el centrado con ésta técnica no sirve si se desconoce a priori la altura de la caja.

Si quieres centrar un h1, por ejemplo, en la ventana del navegador, deberás utilizar una de las técnicas anteriores para centrar al .hijo sabiendo su altura y en el h1 utilizar la altura de línea.

Centrado con Display

Si has prestado atención a todos los casos planteados hasta ahora, posíblemente te hayas dado cuenta que no he mencionado una propiedad que a priori parecería que es la más indicada para el centrado vertical: vertical-align, o la alineación en la vertical. La razón la encontrarás en lo que dice la especificación sobre esta propiedad:

vertical-align: Se aplica a los elementos a nivel de línea y 'table-cell'.
Esta propiedad afecta el posicionamiento vertical dentro de una caja de línea de las cajas generadas por un elemento a nivel de línea. Los siguientes valores sólo tienen significado con respecto a un elemento a nivel de línea padre, o a un elemento a nivel de bloque padre, si ese elemento genera cajas de línea anónimas; no tienen ningún efecto si no existe tal padre.

Centrado con "Display: table" y asociadas

Así que para utilizar el vertical-align hay que provocar que el comportamiento de un elemento de bloque sea como el de una tabla. Para ello, Css define el valor table y asociados para la propiedad display.

Display: Se aplica a todos los elementos.
Valores del grupo de tabla: table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell y table-caption
Estos valores provocan que un elemento se comporte como un elemento tabla.

En puridad, habría que definir al menos tres elementos con estas propiedades: uno con table, su hijo como table-row y el tercero a centrar como table-cell.

Cuando sólo tenemos un elemento en el body y lo queremos centrar en la ventana del navegador, podemos utilizar el selector html y body para lograrlo:

html { display: table; height: 100%; width: 100%; } body { display: table-row; } h1 { display: table-cell; vertical-align: middle; text-align: center; }

Y en la captura de abajo ves el resultado. El <h1>KsesoCss</h1> se centra tanto en la horizontal como en la vertical con independencia del tamaño de la ventana:

Para el siguiente ejemplo, creo un div para aplicarle display: table, el amarillo cuadriculado con display: table-cell y el tercero es el centrado, en la horizontal con el margen:

<div style="display: table; width: 100%; height: 250px;"> <div class="ejemplo" style="display: table-cell; height: 100%; vertical-align: middle;"> <div contenteditable="true" class="centrada" style="width: 50%; margin: 0 auto;"> KSESOCSS Por una web con mucho estilo, para Argonautas con buen gusto. Contenido editable. </div> </div></div>
KSESOCSS
Por una web con mucho estilo, para Argonautas con buen gusto. Contenido editable.

El motivo para ser tan poco usada hasta el momento la declaración display: table no es otro que el estropicio que con ella hacían los ie6 y 7. Lo mismo para el vertical-align, que ie7 sólo la maneja en elementos que por naturaleza son de línea.

Display: table; Punto y mini punto

Con una doble utilización partiendo de no saber absolutamente nada del elemento.

  1. No necesitas saber ni declarar la anchura de la caja que quieras centrar horizontalmente: con este display y los márgenes laterales en auto nada se resiste.
  2. Si lo declaras a un elemento de bloque (un div) que como es sabido lleva en sus genes apropiarse de todo el espacio horizontal disponible, harás que se extienda sólo en función de su contenido. Mira el ejemplo:
div { display: table; margin: 0 auto; } /*html :*/ <div> <img src="ruta.ext" alt="alt" /> </div>

El resultado:

imagen de demostración

Esta regla css (diplay: table + margin: X auto) puedes usarla en una clase para centrar las imágenes y así unto a las típicas .izquierda // .derecha con sus floats correspondientes cubrir los tres casos de alineación de imágenes.

Doble centrado del contenido

Si lo que queremos es centrar en la vertical el contenido en una caja, tan sencillo como:

.padre { display: table; height: 150px; /*valor que necesites* width: 60%; /*Valor que necesites*/ padding: 1em; /*sólo ornamental */ } .hijo { display: table-cell; vertical-align: middle; }
KSESOCSS Por una web con mucho estilo, para Argonautas con buen gusto. Contenido editable.

En este último ejemplo también podrías alinear el texto al centro añadiendo text-align: center;

Centrado de elementos flotados sin conocer anchuras ni su númeroNuevo 03/2013

Típico caso de menú horizontal con un número indeterminado de opciones donde los li´s se encuentran flotados:

Centrar cajas flotantes sin ancho definido. Por @Oloman

Tienes un artículo en este blog escrito por @Oloman, autor del blog Oloblogger, donde se explica detalladamente cómo lograrlo:

Ver artículo y demo

Centrar elementos flotados con fit-content

Utilizando el valor de width: fit-content se consigue centrar tanto la lista (ul) como sus items (li´s) sin necesidad de saber ni el número de ellos ni sus tamaños. Esto es, no es necesario calcular ni declarar tamaños. Y como bonus tampoco se necesita limpiar los float.

Puedes ver una explicación detallada en el artículo "Centrar elementos flotados con fit-content sin saber número ni tamaños" y este el ejemplo funcionando:

Check out this Pen!

Centrado de elementos en línea

Centrado con vertical-align

Otros casos de centrado, son aquellos en los que los elementos que intervienen son de línea y con diferentes alturas. El ejemplo típico es el de una imagen y un texto dentro de un bloque.

<p><img src="ruta.ext" alt="alt" />Texto que acompaña a la imagen</p>

En estas situaciones, el elemento al que hay que declarar el vertical-align es a la imagen:

Lobo con piel de oveja

Esta solucción sólo es válida mientras haya una sola línea de texto. La 2ª y siguientes se posicionarán debajo (eje Y) de la imagen. Para esos casos hay que recurrir a otro método, como el siguiente.

Centrado vertical de múltiples líneas de texto respecto a una imagen

imagen con texto de varias líneas a su lado centrado en la vertical.
A la izquierda de este texto tenemos una imagen. El texto son unas cuantas líneas que se posicionan centradas respecto a la vertical de la imagen. Para este particular elijo el marcado figure y su asociado figcaption Los códigos Css y Html abajo.
figure {display: table;} img, figcaption {display: table-cell; vertical-align: middle;} Marcado Html <figure> <img src="barb.jpg" /> <figcaption> Texto extenso descriptivo de la imagen... </figcaption> </figure>

Centrado con padding

Otro caso típico es el centrar en X e Y un pequeño texto dentro de una caja, como suele suceder con el texto de un enlace en un menú

<ul> <li> <a href="#"....</a> </li> </ul>

Este caso tiene múltiples variables, pero básicamente se logra declarando los enlaces como bloques y asignandoles un padding superior e inferior y derecho e izquierdo de valor igual en cada par. Si los li´s tienen una anchura definida, basta con declarar la anchura del enlace al 100%, texto alineado al centro y padding superior e inferior al gusto.

Centrado horizontal y vertical con pseudoelemento CSS ::before

Una de las formas más sencillas de lograr un centrado simultáneo en ambos ejes, sin ser necesario añadir etiquetas en el html, es utilizar el pseudoelemeto ::before

KSESOCSS Por una web con mucho estilo, para Argonautas con buen gusto. Contenido editable

Tienes una explicación más detallada en este artículo del blog.

Centrado en el flexbox

El nuevo modelo de caja flexible o flexbox provee nuevas formas de lograr el doble centrado, horizontal y vertical, de una forma súmamente sencilla:

Para una explicación pormenorizada del flexbox o "Flexible Box Model Layout" puedes ver este artículo del blog.

Más formas y más sencillas de centrar

Lo nuevo de Css3 para position

El documento del W3c "CSS Positioned Layout Module Level 3" introduce novedades sobre el posicionamiento de los elementos. Entre otras añade dos propiedades que podrán ser utilizadas para lograr centrar elementos:
Position: Center;
Position: Page;

Te remito a este artículo del blog donde ya las comenté.

Float: positioned

Sí, aún me dejaba una última para el final. Junto a las posiciones anteriores, Css3 en el documento "CSS Floats and Positioning Level 3" define el nuevo valor para la propiedad float: positioned. Este valor, junto a las propiedades de posicionamiento (top/bottom y left/right) también posibilita nuevas formas de centrar. Échale un vistazo al documento que te enlazo para ir conociendo lo más nuevo.

A modo de resumen final

Al plantearse el centrado de un elemento antes de escribir ni una sola línea de código Css hay que evaluar qué tipo de elemento es, qué contiene y dónde está contenido, así como proveer una serie de variables y las circunstancias en las que se desea lograr el centrado. Así se evitarán sorpresas desagradables y desesperar porque lo que pensábamos que iba a funcionar no lo hace como querríamos.

Espero que tu caso esté entre los que acabo de recoger en el post, porque sin pretender recopilar y dar una solucción a todos los posibles, sí creo que están los más comunes.

Lo que sí he dejado sin tratar es la alineación simultánea de varios elementos. O lo que es lo mismo: cómo distribuir equitatívamente varios hermanos en su caja padre. Este ya es tema para otro artículo:
Alineación simultánea: 3 dobles centrados de cajas en número y tamaño dispares.

¿Crees que me he dejado en el tintero algún supuesto común o el que a ti no te sale? ¿Conoces algún otro de los recogidos aquí? Si la respuesta es sí a cualquiera de esto, abajo tienes los comentarios para dejar constancia de mi olvido

Publicado el por y Archivado en

Sugerencia: estos artículos tienen relación con el que acabas de leer. Puede que sean de tu interés.

Cartas al Editor [ 53 ]

El autor de artículo y el blog estaremos encantados de leer tu opinión, críticas, corrrecciones, matizaciones, ampliaciones o cualquier comentario que su lectura te sugiera. Y lo agradecemos... siempre que esté hecho con educación, buenas maneras y respeto.
Para publicar código envuélvelo con la etiqueta [code] [/code].
Para insertar Pens de @codepen mira esta guía.

  1. Hola, quisiera centrar un par de menues o mejor dicho navcontainer de mi blog y no se como, me das una mano amigo???

    ResponderEliminar
  2. Hola nightcrawler23
    Como habrá observado, el blog no está enfocado ni tampoco cuenta con las herramientas necesarias para ser un lugar de consultas y resolución de problemas concretos.
    En la web encontrará multitud de sitios con esa finalidad y que además cuentan con las herramientas necesarias para exponer el problema y los códigos involucrados.

    Un saludo

    ResponderEliminar
  3. Anónimo15/11/12

    gracias por el aporte, una consulta en mi caso el div padre mide 100% mientras que el div hijo 700px x 400px, como podria centrarlo, es que debo establecer las propiedades min-width y min-height para el padre ?

    ResponderEliminar
  4. Sin más información que la que aportas es imposible recomendar sin fallar uno de los 17 métodos de centrado que describo:
    Navegador (versiones) a tener presentes, tamaños de "ventana" a tener en cuenta, ¿Los 2 divs son divitis o contenedor de otros elementos?, ¿qué tipo de contenido? ¿qué centrado? ¿En X, en Y, en los dos?...

    Con tan escaso información sí se puede descartar alguno. Pero eso lo puedes hacer tú tranquilamente.
    Como verás, el diablo y la virtud están en los detalles. Y mi carencia en que no soy adivino.

    Un saludo.

    ResponderEliminar
  5. Anónimo15/11/12

    tratare de ser un poco mas especifico y gracias x responder tan rapidamente, dentro de toda la ventana del navegador tengo un div ("all" - width:100%; height:100%), dentro de este tendre otro div (container width:800px; height:600px) lo que quiero es centrar al div container respecto al padre y que esto funcione en todos los navegadores y resoluciones, el div container tendra a su vez otros div, textos, images, etc. tenia duda si debia establecer un min-height y un min-width para el padre (div "all"). para asegurarme que no colapse la distribucion de las capas ? que tecnica me aconsejarias?

    ResponderEliminar
  6. En todos los navegadores (¿versiones también?) y resoluciones?
    Pues una mezcla de todas las formas descritas con ayuda de las @media queries y posiblemente comentarios condicionales para versiones anteriores de ie.

    Y con una caja "tan grande" como 800x600, quien no conoce al detalle el proyecto, no recomendaría la técnica de los márgenes negativos (que sería soportado por todos y todas las versiones). El riesgo de que queden contenidos inaccesibles es demasiado probable en demasiadas situaciones.

    ResponderEliminar
  7. Gracias, gracias, gracias, gracias y más gracias para siempre

    ResponderEliminar
  8. sos un genio, para los que estamos iniciando en css tus tips son de muchisima utilidad, gracias por compartir.
    Saludos,
    Andres.

    ResponderEliminar
  9. grandísimo artículo y lo mejor de todo, que se actualiza constantemente! :D

    ResponderEliminar
  10. Excelente articulo, muchas gracias....

    ResponderEliminar
  11. Excelente artículo, muchas gracias me sirvió bastante...

    ResponderEliminar
  12. excelente articulo, me sirvió bastante muchas gracias

    ResponderEliminar
  13. excelente articulo muchas gracias

    ResponderEliminar
  14. Esa actualización de Agosto 2013 sobre el posicionamiento absoluto con valores cero para las cuatro direcciones me está sorprendiendo. Hoy es el segundo artículo que leo al respecto y es una cosa que yo usaba desde hace tiempo, ya que además del centrado total, permite generar un height 100% real. No sé, pensaba que no era novedad, pero ya veo que estaba poco difundido.

    Bien actualizado el artículo en cualquier caso, al que acudo con frecuencia para resolver problemas ;)

    ResponderEliminar
    Respuestas
    1. Yo reconozco que me sorprendí con ella.
      Creo que lo que ocurre es que genera una "doble caja" si se me permite la expresión nada ortodoxa:
      La primera sería una caja "virtual" de contención que "saldría" de los valores a 0 para las 4 propiedades de posicionamiento (que en ausencia de tamaños declarados también definen el tamaño de la caja) ocupando toda la superficie del padre. La segunda y real la generada por la anchura y altura.
      Y sería sobre esta segunda en la que sí afecta el margin: auto quedando las restricciones de esta declaración para la caja "virtual".
      Posíblemente lo anterior sea una burrada que en nada se parezca a lo que realmente ocurre.

      Lo que no me sorprende tanto es su excaso conocimiento o desconocimiento mayoritario. Pues como bien apunta el pen que enlazo falla en ie7 y anteriores. En el IE8 ya es funcional.

      Gracias por la(s) visita(s) y aportaciones ;-)

      Eliminar
  15. Hola tengo una consulta.
    Tengo una clase en la cual tengo un titulo de una articulo su altura es de 40px, el problema es que cuando el titulo ocupa dos lineas de texto me queda bien porque ocupa toda la altura y no necesita estar centrado.
    En el primer caso debo usar line-height:40px; para que aparezca centrado dentro de los 40px pero el problema es que en el caso 2 se me va parte del titulo para abajo al ocupar dos lineas.
    Quisiera saber como debería hacer para que en el primer caso al tener el titulo de una sola linea con line-height no se me modificara cuando el articulo tenga dos lineas de texto.
    Muchas Gracias
    Excelente Blog!

    ResponderEliminar
    Respuestas
    1. Hola Fabian
      Cuando se hace una consulta es imprescindible facilitar un mínimo de información que incluya como poco los códigos que afectan al problema. Marcado y estilos son imprescindibles. Y mejor todavía un enlace a la página o demo.
      Sin códigos es imposible dar una respuesta con códigos.

      Por lo que dices no se si será ante todo un problema de mal planteamiento y diseño de esos elementos o si con la técnica del vertical-align o del pseudoelemento para ese título se conseguiría.

      Un saludo.

      Eliminar
  16. Yo es que aun no me creo lo de margin:auto + position:aboslute me siento muy tonto jaja increible buen articulo Kseso

    ResponderEliminar
  17. oh muchas gracias por este material, me acaba de salvar otra vez, sigo juicioso cada uno de sus post

    ResponderEliminar
  18. Como centrar un img que esta dentro de un div y que lo contiene un header =(

    ResponderEliminar
    Respuestas
    1. Pueshaberiamosdemiraraveradondeseametioelheadersinolvidarnosdeverlasporpiedadesyvaloresdetodosycadaunodeloselementosysurelacionesdetamañosconsuancestrorespectivosinolvidarmedepreguntarporeltipodecentradoquedeseavuesamercedsisoloenlahorizontalotambienenlavertical

      Si esto es una consulta que venga MEV, que a mi me supera.

      Eliminar
  19. La verdad que con este articulo estoy quedando como si supiera, digo, en el foro donde nos cruzamos por primera vez, he referenciado el mismo una cuantas veces, adaptando la solución según el inconveniente/consulta.
    Muchas gracias y saludos kseso.

    ResponderEliminar
    Respuestas
    1. No debes ser el único en usar este artículo, vistas las estadísticas :-))
      Que por otra parte es mi razón para publicar.

      ¿Pero todavía sigues por allí?
      Entonces te perdono las cervezas xD~ =P

      Eliminar
  20. Ah, me olvidaba, supongo que la cerveza deberé enviarla en un buque petrolero por todas las que le debo a cuenta.

    ResponderEliminar
  21. hola!, necesito ayuda.... tengo una web q esta alineada a la izquierda, ésta contiene dos div's con position="absolute" y solpape uno sobre el otro.
    Necesito centrar la pagina completa pero creo q por estas propiedades no me lo permite, que opcion tengo para centar la web, sin necesidad de dañar los otros elementos contenidos en ella.
    gracias

    ResponderEliminar
    Respuestas
    1. Lo siento. Pero su consulta carece de la mínima información para poder pronunciarse. Mucho menos para darle una solución concreta y precisa a su caso.
      Suposiciones, cávalas y respuestas genéricas, 500. Pero repito, ad hoc para su problema ni una por desconocer todo lo relativo a él.

      Un saludo

      Eliminar
  22. Se dice caja central....y perdón por la corrección.

    ResponderEliminar
    Respuestas
    1. Perdón, en ningún sitio pone caja centrar sino caja A centrar...craso error por mi parte...Buen artículo por cierto..y yo me voy directo al oculista... Gracias.

      Eliminar

  23. Gracias por tanta informacion es para mi el mejor blog de css, las tecnicas que describes aqui para centrar son geniales. veo que es una pagina hecha en blogger, mes gustaria que hicieras un tutorial para aprender a modificarlo asi como el tuyo.

    ResponderEliminar
    Respuestas
    1. Gracias Admn, aunque creo que exageras algo.

      Sobre escribir un tuto sobre cómo personalizar blogger... ufff! no lo controlo tanto como para eso.
      Pero tienes suerte. porque hay otros autores con sus blogs que pueden serte de gran ayuda, como por ejemplo el amigo Oloman en su blog.
      A partir de él seguro que descubres otros que también se te serán de ayuda.

      Un saludo

      Eliminar

  24. Gracias por tanta informacion es para mi el mejor blog de css, las tecnicas que describes aqui para centrar son geniales. veo que es una pagina hecha en blogger, mes gustaria que hicieras un tutorial para aprender a modificarlo asi como el tuyo.

    ResponderEliminar
  25. Gracias Muy buena tu página me sirvió mucho

    ResponderEliminar
  26. Hola.
    Muy buen artículo, hace un tiempo que conozco tu blog, pero lo perdí...
    Precisamente hoy al buscar como centrar una lista, lo encontré y lo he vuelto a agregar a favoritos...
    Verás, espero me puedas ayudar con este problema...
    Resulta que tengo una lista que está contenida en un 'secition' pero no logro que esta se centre al contenido...
    he puesto el código aquí: http://jsfiddle.net/E5BbB/
    pero la verdad es que no entiendo cómo se podría centrar si esta no tiene un ancho específico...

    ResponderEliminar
    Respuestas
    1. Hola Daniel
      ¿Podrías, por favor ser más explícito sobre qué quieres centrar respecto a qué?
      Porque tus palabras pero no logro que esta se centre al contenido... junto a alguna incongruencia o código contradictorio en css me impiden saber exáctamente lo que necesitas lograr.

      Un saludo

      Eliminar
    2. Lo siento si no me hice entender.
      Resulta que tengo una lista 'ul' que se encuentra dentro de un 'div' que a su vez está en un 'section':
      >section>div>ul
      Lo que deseo hacer es que la lista 'ul' se centre dentro de la etiqueta 'div',

      En sí, visto gráficamente desde el fiddle. Lo que pretendo es que los cuadros de borde blanco estén centrados en relación con el cuadro de borde rojo,

      Eliminar
  27. Hola, En vista de que no pude hacerlo de esta forma... decidí borrar el código que tenía y leyendo tu artículo de http://ksesocss.blogspot.com/2013/01/tabla-css-rwd.html quedó mejor de lo que pensaba y de una forma más sencilla...
    Gracias por escribir.

    ResponderEliminar
  28. Hola he hecho la pagina http://www.cmdiseños.com.ar/index2.html y encuentro que en mozilla el slider se muestra descentrado. Me pueden ayudar? GRACIAS

    ResponderEliminar
    Respuestas
    1. Sí, Claro que te puedo ayudar, pero posiblemente no sea en la forma que esperas.
      El primer paso
      Fíjate que hasta el enlace que has tirado en el comentario falla.

      Un saludo

      Eliminar
  29. Disculpa, torpe error: http://cmdisenos.com.ar/index2.html
    El problema pasa en mozilla el slider se va para el margen derecho. Ya he probado diferentes tipos de alineacion y ni siquiera se mueve de ese lugar. En los demas navegadores se muestra centrado.
    Me han dicho que quisas es problema con el nav.... pero no se solucionarlo... GRACIAS

    ResponderEliminar
    Respuestas
    1. El problema lo tiene con la colisión de estilos entre .next_button y .box_skitter .container_skitter
      Son los responsables del desplazamiento y aparición del scroll
      Posicione al segundo de forma absoluta o anule en el primero el 'absolute'.

      Eliminar
  30. Por ahí anda el problema, poniendo "absolute" en box_skitter se me situa sobre el borde derecho. Entonces opte por sacarle el absolute a next_button y se situa perfectamente al medio pero se superpone con section :S

    ResponderEliminar
    Respuestas
    1. Yo de usted haría una de dos:
      .- O despedir al mono que picó el código Css
      .- Pagarle en otra cosa que no sean plátanos.

      Ya le indiqué el origen del problema del desplazamiento de la imagen. Si al corregir ese fallo se da cuenta de otros malfuncionamientos el culpable no es la solución, es su código.

      Partió de un error inicial, y para compensarlo fue añadiendo parches que al corregir el error inicial se convierten a su vez en errores.

      Le toca deshacer lo mal hecho o comenzar desde cero otra vez con el original. Y si es el original el que contiene errores o fallos lo suyo es que se dirija a su autor.

      Un saludo

      Eliminar
    2. Buscare la solución en otro blog. Gracias.

      Eliminar
    3. uyuyuy! Eso ha sonado a enfado y portazo despechado.
      ¿Le falté en algo? ¿Tenía yo con usted o con su cliente algún compromiso y lo he incumplido? Si es así, hágamelo saber, por favor.

      Gracias y de nada

      Eliminar
    4. "Buscare la solución en otro blog...."

      O quizá en un manual CSS.

      Yo no tengo un sitio o una empresa que se dedique a hacer diseño, pero me ha pasado que "debí" hacerme cargo de fallas en páginas abandonadas por otros. En el link que te dejó Kseso puede faltar la descripción de estos casos, y entonces conviene aclarar que se tiene la voluntad pero no los conocimientos para hacer el trabajo. No digo que así lo vayan a hacer por vos, pero seguro alguien te va a tener más paciencia ante los comentarios desubicados.

      Bien, en realidad venía a felicitar justamente por el enlace al "tutorial" sobre cómo hacer planteos en estos sitios. Ya lo había visto anteriormente, porque tiene mil años de publicado; y se nota en lo desactualizado de los ejemplos. Pero justamente por eso notamos desde hace cuanto que todos venimos insistiendo con lo mismo. El que no lo entiende es porque no quiere.
      Y entonces sí que no debemos tenerle paciencia.

      Una curiosidad : allí se menciona al hacker en su primitiva acepción, cuando era alguien que buscaba la manera menos conocida de hacer las cosas, los métodos que comunmente no se usaban para llegar a un fin investigando el mecanismo o funcionamiento original del objeto.
      Por supuesto que en informática se puede convertir en un ente peligroso, y de alguna manera se demonizó el término; al punto que aún hoy se lo confunde con un cracker (que utiliza estos métodos para dañar a otros o cometer delitos).
      Los hackers son gente de poca paciencia, pero les gusta ayudar y resolver problemas. Solamente hay que tratarlos con respeto.

      [Nota: Hola Kseso, no vi tu comentario, seguro lo escribiste mientras redactaba éste. Ahora quedo medio fuera de lugar, pero lo dejo porque ya lo tengo tipeado. Un saludo. ]

      Eliminar
    5. Disculpa si te he hecho sentir con algun compromiso, no fue mi intención. Quise agradecerte porque tu blog es muy util para nosotros y no creo que este tipo de cosas sean para crear alguna discusión sino para ayudarnos entre todos.
      El que quiera agredir o hacer sentir mal a otros simplemente salga a la vereda de su casa, aunque no comparto esa forma de vida.
      Hasta luego.

      Eliminar
  31. Hola, muy valiosa tu información, concreta y util, gracias por compartirla, saludos

    ResponderEliminar
  32. Me sirvió un montón! Estuve buscando una forma de centrar un a con una imagen dentro en wordpress sin que el enlace ocupe todo el ancho del contenedor. Me quede con Display: table; Punto y mini punto

    ResponderEliminar
  33. Muy buen articulo maestro

    ResponderEliminar