Centrando al centro con Css: Todas las formas conocidas para hacerlo (25) 15.12.15
Actualizado: Noviembre 2015: 26+ formas totalmente distintas de centrar elementos con css y algunas variaciones: en la horizontal, la vertical o ambas. Elementos de bloque, línea, posiciones absolutas, relativas, de tamaños conocidos o ignorados, cajas, textos, imágenes...
Centrando al centro con Css: Todas las formas conocidas para hacerlo (25)
Pocas 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) 26+ 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.
Y otra obviedad: tampoco confundas centrar con alinear. Aunque sea alinear al centro. Normalmente en el caso de las alineaciones al centro todo se reduce a dos casos: centrar la caja padre en su ancestro si controlamos su tamaño para que sea el de su contenido o el de éstos, los elementos hijos, repartirlos en la anchura del padre para que el espacio vacío sea igual por sus laterales.
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:
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:
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 %:
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:
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 (position≠static;).
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).
Doble centrado sin márgenes negativos con posición absoluta
Añadido: Agosto de 2013Simple y genial, esta obra que vi en Jsfiddle. Es tan sencilla que parece mentira que nadie hasta ahora lo haya descubierto.
See the Pen XmMOdR by Kseso (@Kseso) on CodePen.
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;
}
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 con margin: auto en el Flexbox
NUEVO ENERO 2015Por @LeaVerou me llega esta forma usando margin: auto en el flexbox:
See the Pen doueble centered with margin: auto; on flex by Kseso (@Kseso) on CodePen.
Tienes este artículo sobre esta forma de doble centrado. Posíblemente sea la forma más sencilla y que menos Css necesita.
Doble centrado medidas desconocidas con transform
NUEVO MAYO 2013Una variante del anterior para los casos en que se desconocen las medidas del hijo es recurrir a las transform
.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:
See the Pen double centered in unknown or dynamic sizes by Kseso (@Kseso) on CodePen.
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:
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;
}
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>EsCss</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;"
EsCss
Por una web con mucho estilo, para Argonautas con buen gusto.
Contenido editable.
</div>
</div></div>
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.
- 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.
- 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:
Esta regla css (diplay: table + margin: X auto) puedes usarla en una clase para centrar las imágenes y así junto a las típicas .izquierda{} .derecha{} con sus float
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;
}
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:
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:
See the Pen Fit-content: Items floated and centered by Kseso (@Kseso) on CodePen.
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
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
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é.
CSS Box Alignment Module Level 3
Con la aparición de nuevas características de Css y los documentos del consorcio que las desarrollan se introducen verdaderas revoluciones como son el Flexbox y el Css Grid Layout. Los flex container y grid container
crean espacios con características totalmente nuevas.
En ellos los ítems también necesitan de novedades para su correcto manejo. Un aspecto relativo a la distribución de los ítems respecto a su contenedor y respecto a ellos lo cubre y da respuesta el nuevo documento "CSS Box Alignment Module Level 3". Lo tienes explicado en el artículo [novb 2015] CSS Grid y el módulo Box Alignment.
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
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
Hola, quisiera centrar un par de menues o mejor dicho navcontainer de mi blog y no se como, me das una mano amigo???
ResponderEliminarEnvíame la imagen a mano alzada de tu menú, de como lo quieres centrado y te envio el código
EliminarMuy amable por tu parte, Croninger, este ofrecimiento.
EliminarPero... creo que no viste la fecha del comentario al que respondes (5 años atrás) ;-)
Un saludo
Hola nightcrawler23
ResponderEliminarComo 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
Excelente artículo!!
ResponderEliminarGracias, Jano
ResponderEliminargracias 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 ?
ResponderEliminarSin más información que la que aportas es imposible recomendar sin fallar uno de los 17 métodos de centrado que describo:
ResponderEliminarNavegador (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.
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?
ResponderEliminarEn todos los navegadores (¿versiones también?) y resoluciones?
ResponderEliminarPues 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.
Gracias, gracias, gracias, gracias y más gracias para siempre
ResponderEliminarsos un genio, para los que estamos iniciando en css tus tips son de muchisima utilidad, gracias por compartir.
ResponderEliminarSaludos,
Andres.
grandísimo artículo y lo mejor de todo, que se actualiza constantemente! :D
ResponderEliminarExcelente articulo, muchas gracias....
ResponderEliminarExcelente artículo, muchas gracias me sirvió bastante...
ResponderEliminarexcelente articulo, me sirvió bastante muchas gracias
ResponderEliminarexcelente articulo muchas gracias
ResponderEliminarEsa 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.
ResponderEliminarBien actualizado el artículo en cualquier caso, al que acudo con frecuencia para resolver problemas ;)
Yo reconozco que me sorprendí con ella.
EliminarCreo 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 ;-)
Hola tengo una consulta.
ResponderEliminarTengo 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!
Hola Fabian
EliminarCuando 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.
Yo es que aun no me creo lo de margin:auto + position:aboslute me siento muy tonto jaja increible buen articulo Kseso
ResponderEliminaroh muchas gracias por este material, me acaba de salvar otra vez, sigo juicioso cada uno de sus post
ResponderEliminarComo centrar un img que esta dentro de un div y que lo contiene un header =(
ResponderEliminarEste comentario ha sido eliminado por el autor.
EliminarLa 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.
ResponderEliminarMuchas gracias y saludos kseso.
No debes ser el único en usar este artículo, vistas las estadísticas :-))
EliminarQue por otra parte es mi razón para publicar.
¿Pero todavía sigues por allí?
Entonces te perdono las cervezas xD~ =P
Ah, me olvidaba, supongo que la cerveza deberé enviarla en un buque petrolero por todas las que le debo a cuenta.
ResponderEliminarExcelente!!!!
ResponderEliminarhola!, 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.
ResponderEliminarNecesito 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
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.
EliminarSuposiciones, 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
Se dice caja central....y perdón por la corrección.
ResponderEliminarPerdó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
ResponderEliminarGracias 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.
Gracias Admn, aunque creo que exageras algo.
EliminarSobre 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
ResponderEliminarGracias 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.
Gracias Muy buena tu página me sirvió mucho
ResponderEliminarHola.
ResponderEliminarMuy 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...
Hola Daniel
Eliminar¿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
Lo siento si no me hice entender.
EliminarResulta 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,
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...
ResponderEliminarGracias por escribir.
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
ResponderEliminarSí, Claro que te puedo ayudar, pero posiblemente no sea en la forma que esperas.
EliminarEl primer paso
Fíjate que hasta el enlace que has tirado en el comentario falla.
Un saludo
Disculpa, torpe error: http://cmdisenos.com.ar/index2.html
ResponderEliminarEl 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
El problema lo tiene con la colisión de estilos entre .next_button y .box_skitter .container_skitter
EliminarSon los responsables del desplazamiento y aparición del scroll
Posicione al segundo de forma absoluta o anule en el primero el 'absolute'.
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
ResponderEliminarYo de usted haría una de dos:
Eliminar.- 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
Buscare la solución en otro blog. Gracias.
Eliminaruyuyuy! Eso ha sonado a enfado y portazo despechado.
Eliminar¿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
"Buscare la solución en otro blog...."
EliminarO 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. ]
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.
EliminarEl 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.
Hola, muy valiosa tu información, concreta y util, gracias por compartirla, saludos
ResponderEliminarMe 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
ResponderEliminarMuy buen articulo maestro
ResponderEliminarEs más fácil centrar vertical y horizontal sólo usando sus respectivos atributos + un margin auto
ResponderEliminarTop - Bottom = Vertical
Right - Left = Horizontal
Un ejemplo para que un contenedor esté centrado verticalmente
.contenedor{
margin: auto;
top: 0;
bottom: 0;
}
Otro ejemplo para que un contenedor este centrado horizontalmente
.contenedor{
margin: auto;
right: 0;
left: 0;
}
Un ultimo ejemplo para que un contenedor esté centrado horizontal y verticalmente (en el centro de la pantalla)
.contenedor{
margin: auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
Yo uso los valores en ceros también para crear los header y footer de mi página, también manejando position absolute o fixed, y así siempre se mantendrán en la parte superior o inferior de la pantalla sin importar el tamaño del contenido (el contenido sí requiere un margin-top del alto del header + el espacio blanco que queramos dejar entre el header y el contenido)
Mi regla es centrarme en top, bottom, right y left si lo que quiero es un contenido posicionado en un lugar especifico, combino los valores para crear un punto en el cual ni uno es superior al otro (por lo cual el contenido queda centrado horizontalmente al combinar un right 0 con left 0 y margin auto, o centrado verticalmente al combinar top 0 con bottom 0 y margin auto... O horizontal y vertical al combinar ambos + margin auto)
Espero les ayude, así se evitan el manejar pixeles, em / rem, vh, etc y / o hacer tantos cálculos
PD: Sí les recomiendo manejar medidas escalables (también para las fuentes; Medidas escalables como: %, em, rem, vw, vh, etc... NO px, pixeles sólo para definir un limite máximo o mínimo), ayuda de mucho y puedes optimizar tu sitio a distintos dispositivos con media queries; Responsive Design
Ah y me olvide xD
EliminarMe centré en lo básico... Aparte del margin debería contener un position absolute, fixed o inherit (que son los que recomendó ya que son los que he usado para centrar los objetos de mis páginas sin problemas), y también definir un height...
También un width sí quieres definir un ancho (digo esto porque el ancho se crea junto con el contenido, pero puedes definir uno tu mismo, y es mejor definirlo porque así controlas bien tu contenido) y ahora sí, ya con todo esto el contenido se centraría sin tener que hacer cálculos
top, bottom + o left, right en valores 0 c/u
margin auto
height + o sin width
position absolute / fixed / inherit
Y sería todo
"Tu regla" ya fue explicada en el artículo.
EliminarY mencionada luego en los comentarios.
(Y, agrego, a estas alturas ya no sería novedad.)
:-\
Jesús gracias por tomarte tu tiempo y trabajo para comentar tan extensamente.
EliminarSin embargo, como bien le señala Furoya lo que pretende decir ya se encuentra en el artículo, en concreto en el apartado "Doble centrado sin márgenes negativos con posición absoluta" desde Agosto de 2013. Acompañado de un ejemplo en jsfiddle.
Y con esa técnica (uso de las cuatro propiedades de ubicación) es obligado declarar medidas.
Un saludo
Furoya y Kseso
EliminarSí, lo noté después u.u jaja lo que paso es que escribí el comentario sin haber terminado de leer el artículo... Me salte ese apartado y por eso no lo vi en su momento, el scroll de mi mouse no funciona con desplazamiento de dedo D: entonces hago scroll con las flechas del teclado o pulso el scroll para que me salga en chrome que puedo moverme sobre la página con desplazar el mouse hacia donde me quiero mover, así que creo que me salte ese apartado, una disculpa y gracias por tomarse el tiempo de leer
Saludos!
A veces pasa.
EliminarIgual te comento : es raro que a Kseso se le escape algo. Bueno, a veces también pasa, pero insisto en que es muy raro. Yo hubiese buscado dos veces para saber por qué omitió ese método, y seguro que entonces lo veía ahí, medio escondido.
Me quedé pensando en eso que decís de Chrome, porque en los demás navegadores también anda el "click del medio" para poner el nodo de desplazamiento a mitad de la ventana.
Lo que hay aquí es un problema con los títulos fijos, que saltando con el teclado ([RePág] y [Av pág]) terminan ocultando parte del contenido del documento. Es algo que comentamos ya en otro tema, y pasa (y pasó, y pasará si el Consorcio y/o los desarrolladores de browsers no lo corrigen) con todos los casos de position sticky.
Teniendo en cuenta ese detalle, si que se te pudieron escapar el ejemplo y el comentario de Oloman cuando 'saltabas'.
;-)
Un saludo.
Excelente!!!! Debo decir que a veces accedo al blog solo para ver lo bonito que es el diseño :-)
ResponderEliminarExcelente blog, es un material bastante bueno; me ha ayudo mucho.
ResponderEliminarGenial, me ayudo bastante, Gracias!
ResponderEliminarHola gracias por tu tiempo. Yo tengo un problema con los div, pues me interesa mantener centrado un div respecto a los dos de los extremos, es decir tengo un div grande con tres div dentro, el del medio(de los de adentro) mantenerlo siempre centrado, respecto a los otros dos, y además mantenerlo encima de los otros, en este caso el del medio tendria z-index="3". Me podrias ayudar? Gracias de antemano...
ResponderEliminarHola Daysil
EliminarHe de reconocerte que de las dos partes necesarias para obtener una respuesta persolizada has bordado la primera: la exposición.
Lamentablemente olvidaste la segunda: los códigos de tu caso concreto o particular.
Así que voy a sacar mi bola de adivino y a ver qué tal funciona ;-)
Mira a ver este artículo y sus demos incluidas es lo que necesitas.
Un saludo
Antes que nada muy buen día, un agradecimiento por tu esfuerzo y trabajo realizando este sitio en el que ayudas a todos.
ResponderEliminarMe gustaría preguntarte que libros de css me recomiendas para empezar a entenderlo mejor(ciertamente la propia documentación del mismo es de gran ayuda, aunque si te soy honesto no siempre le entiendo muy bien ;-) )ciertamente soy un novato en esto, pero me gustaría llegar a dominarle como es obvio que tú lo haces.
De antemano agradezco tu atención y de nuevo gracias por este blog tan genial.
Hola Osvaldo
EliminarGracias pero creo que exageras (y bastante xD )
Aunque quisiese no podría recomendarte ninguno que no esté obsoleto por el paso del tiempo.
Pero seguro que si el inglés no es problema sabrás localizarlos. Al menos los más mentados y recomendados en la actualidad.
Pero mi opinión, más que literatura lo que te podrá ayudar es "destrozar" realizaciones que te llamen la atención. A mi me sigue funcionando el modificar declaraciones en demos ajenas para comprender su funcionamiento.
Y hoy con páginas como codepen es más sencillo aún.
Un saludo
Muchas gracias por tu respuesta y seguiré tu consejo a la vez que tomo unos cuantos de tus códigos prestados =) para aprender más.
EliminarSaludos y que estés bien.
esto funciona tambien cuando quiero mostrar la parte de una imagen de una entrada
ResponderEliminarUnos capos, muchas gracias por la info.
ResponderEliminardisplay: flex; + margin:auto;
Milagrosas lineas :D
buenas noches ayudenme por favor tengo una plantilla de wordpress que no puedo centriar es la plantilla endero. ayudenme por favor saludos...
ResponderEliminarSin códigos o un enlace a la página donde se manifiesta el problema es imposible, Jaime Rivera.
EliminarEl único dato que aporta es el nombre de la plantilla, endero. Así que buscándola el tema original sí aparece centrada (al menos en mi pantalla) y con algunas inconsistencias se ajusta la anchura.
Así que la conclusión es que ha debido tocar algo de los códigos originales que impide que en su copia se centre.
Como nadie más que usted sabe cuáles son esos cambios para poder revertirlos... creo que le va a tocar instalarla de nuevo.
Un saludo
excelente post! GRACIAS!!!
ResponderEliminarla mejor opcion es definir el tamano del elemento en % y luego posicionarlo en css con los tags
ResponderEliminar-left
-top O bottom
Y 'right', no te olvides de ' right'.
EliminarAh, y sobre todo: no te olvides de que ninguno de los que mencionaste es un "tag".
El problema aparece cuando no le podés dar un tamaño al elemento. Creo que el artículo es muy claro en ese asunto.
Ni idea, Jason para cuál de todos los casos expuestos en el artículo dices que eso es lo mejor.
EliminarPorque supongo que no lo propondrás como solución universal para cualquier centrado, alineación o distribución uniforme (en uno o ambos ejes) ya sean uno o múltiples elementos ¿no?
Buen día, me surgio un problema en css y aunque lo solucione no entiendo el por que sucedia dicho problema, el siguiente es el html;(renombre la etiqueta Div y img por disve imgs respectivamente para poder publicar el Html )
ResponderEliminarCss:
#menu{
display: block;
position: fixed;
height: 100px;
width:100%;
top: 0px;
z-index: 1000;
}
#menu div{
display: inline-block;
height: 100%;
text-align: center;
}
.img{
width:300px;
height:50px;
}
El problema era el siguiente, en un principio cuando los div dentro del menu no tenían contenido se ajustaban correctamente, pero en cuanto coloque la imagen en el primer div este se reposiciono aproximadamante unos 20 px hacia abajo, como si le hubiese agregado un margin-top, ¿por que sucedio esto?, he pensado mucho y no se me ocurre por que paso, lo solucione posicionando la img de manera absoluta y el div padre de manera relativa,pero, aunque quedo como yo quería, aun tengo la duda de por que paso esto.
Siendo franco el css me a dado dolores de cabeza más que ni la programación misma jajaja, agradezco a quien se tome la molestia de dedicarme un poco de su tiempo.
No se ve el HTML. El blog tiene una herramienta para agregar "código" que te evita las incompatibilidades con Blogspot.
EliminarTe diría que si hay un desplazamiento vertical se puede deber al 'line-height' que no está anulado, pero por la descripción, ya no estoy tan seguro.
Muchas gracias Furoya por tu atención, para la siguiente ocasión utilizaré la herramienta que me comentaste, lo bueno es que ya supe por que era, como comento Kseso era la propiedad vertical-align, ya aprendí algo nuevo :) Gracias y que estes bien
EliminarYo hacía la conversión de código a mano, pero esa herramienta es más práctica.
EliminarCon respecto a la alineación ... yo supongo, pero el que sabe es Kseso. Menos mal que se dio una vuelta por aquí.
Gracias a vos, un saludo.
Por lo que cuentas, Osvaldo, creo que se debe a la propiedad vertical-align.
ResponderEliminarY sí, una pena que no usases la herramienta que menciona Furoya o mejor aún insertar un pen con tu caso.
Un saludo.
Una vez más muchas gracias Kseso, como bien comentaste era la propiedad vertical-align, para la proxima prometo usar la herramienta que comenta Furoya, por cierto aprovechando el mensaje, tu blog quedo muy bien con la remodelación, siempre es un placer entrar a el y admirar su apariencia, un saludo y que estes bien
EliminarMil gracias por esta valiosa ayuda y página Saludos cordiales
ResponderEliminarUna pregunta, cuando son más un div, o más textos, cómo logro hacer ese mismo centrado-centro para cada etiqueta? Es que si pongo el mismo css que logra dicho efecto, TODO se junta y no se ve nada bien, todo se queda en la misma posición, y lo que quiero lograr es que sean más de dos div que su width y height son el 100% (ocupan toda la pantalla) pero al mismo tiempo quiero que estén en el justo centrado-centro
ResponderEliminarno sé si me expliqué bien,
espero que si
Hola Lamssie
Eliminarno sé si me expliqué bien:
Ya lo siento, pero no he logrado imaginarme tu caso.
Entre otros, esto me resultan demasiado ambiguo:
si pongo el mismo css que logra dicho efecto
No se a cuál de los 25+ ejemplos te refieres.
Creo que mejor sería que creases una demo con los códigos principales (html + css) ya sea en codepen u otro similar y compartieses el enlace.
Aunque en el fondo creo que se trata de alguna de las variantes de lo que yo llamo "distribución equitativa" de unos elementos y a su vez centrar el contenido de cada uno de ellos.
Si eso fuera, posíblemente la mejor solucción hoy día (Junio de 2017) pase por el uso del flexbox y/o el Grid Layout (sólos o conjuntamente).
Un saludo
buenas noches, quisiera que me ayuden con un problema, como puedo hacer para varias imágenes de diferentes tamaños tengan el mismo tamaño en cada div que lo coloco. espero me puedan ayudar, gracias!!
ResponderEliminarBuenas, Artva Corporation:
EliminarAsí, con semejante parquedad de información y sin ningún código o demo de lo que tienes hecho (en especial tu marcado html usado) lo único que puedo decirte es que le declares una anchura y altura (width & height) iguales a tus imágenes.
Pero eso es una chapuza que yo nunca recomendaría hacer.
Para poder obtener información específica a tu problema le recomiendo leer este artículo del blog y actuar en consecuencia.
Un saludo
Excelente aporte!! Gracias!!!!!
ResponderEliminarGracias!!!
ResponderEliminarMe ha servido mucho tu post :)
¿Han notado que en los ejemplos donde hay cuatro o más elementos en una línea, los elementos contienen texto de una sola palabra?.
ResponderEliminarEsto es para esconder una verdad que nadie dice: No se puede alinear verticalmente un texto dentro de un elemento que a su vez es un elemento de línea que contenga más de un renglón y tenga altura fija. Porque en cuanto le pones una altura fija, la alineación vertical queda sin efecto.
"un elemento de línea que contenga más de un renglón y tenga altura fija"
EliminarUn elemento textual de línea no admite tamaños. Así que o bien hay algún fallo en su planteamiento, su redacción o mi compresión.
O quizás todo a la vez.
No obstante, ahí están los elementos "grid" (o "flex"), bien como elementos de bloque o inline-grid/flex, que al convertir a sus hijos en ítems de grid/flex facilitan comportamientos (a sus ítems) antes mucho más complejos o imposibles.
Y si a ello le sumamos lo recogido por en el documento CSS Box Alignment module creo que su "Esto es para esconder una verdad que nadie dice" suena hasta gracioso.
Un saludo