Una de las mejores y más completas referencias para todas las técnicas de centrado, junto con los pros y los contras de cada una, es el artículo de CSS-Tricks Centering in CSS: A Complete Guide. En los ejemplos siguientes, destaco sólo algunas técnicas que deberían funcionar dentro de los límites del uso de Skrollr para su historia animada.
En tu historia animada, puede que encuentres que te gustaría centrar algunas cosas. Un punto importante que hay que recordar al utilizar Skrollr es que la propiedad de posición de cualquier elemento animado (con atributos data-* establecidos) tendrá una clase skrollable. La clase skrollable tiene el siguiente CSS:
La propiedad left desplaza el borde izquierdo del elemento hacia el centro de la página. La propiedad transform se utiliza con la función translate. La función translate desplaza un elemento alrededor de donde habría aparecido. El valor de -50% empuja el 50% del elemento hacia la izquierda, que se centra en la página.
Es posible que también quieras usar la propiedad transform en conjunto con Skrollr en el elemento que estás tratando de centrar. Esto ocurriría si estuvieras cambiando de tamaño, rotando o sesgando el elemento.
Establece la anchura y fija el margen izquierdo y el margen derecho en automático. Eso es sólo para la horizontal, sin embargo. Si quieres las dos formas, simplemente hazlo de las dos maneras. No tengas miedo de experimentar; no es que vayas a romper nada.
Recientemente tuve que centrar un div “oculto” (es decir, display:none;) que tenía un formulario tabulado dentro de él que necesitaba estar centrado en la página. Escribí el siguiente código jQuery para mostrar el div oculto y luego actualizar el contenido CSS al ancho generado automáticamente de la tabla y cambiar el margen para centrarlo. (El cambio de visualización se activa al hacer clic en un enlace, pero este código no era necesario para mostrar).
Chris Coyier que escribió un excelente post sobre ‘Centrar en lo desconocido’ en su blog. Es un resumen de múltiples soluciones. He publicado uno que no está publicado en esta pregunta. Tiene más soporte de navegador que la solución Flexbox, y no estás usando display: table; que podría romper otras cosas.
transform: translate te permite modificar el espacio de coordenadas del modelo de formato visual CSS. Usándolo, los elementos pueden ser traducidos, rotados, escalados y sesgados. Para centrar horizontalmente se requiere position: absolute y left: 50%.
Usar Flexbox para centrar un div horizontalmente en CSSPodemos usar las propiedades de flexbox para centrar un div horizontalmente en CSS.Flexbox proporciona una forma directa de centrar un elemento vertical y horizontalmente. Podemos crear un flexbox y definir cómo se posicionan los elementos en el flexbox.La propiedad justify-content se puede utilizar para especificar la posición horizontal del contenido dentro del flexbox cuando el contenido no ocupa todo el espacio disponible. Podemos crear un flexbox en el contenedor exterior y establecer la posición del contenedor interior en el centro utilizando la propiedad justify-content.Por ejemplo, selecciona la clase innerDiv y establece las propiedades height y width a 10vh y 10vw. Establezca el color negro como color de fondo. A continuación, selecciona la clase outerDiv y dale el ancho al 100%.Establece su color de fondo al 100%. A continuación, crea el contenedor un flexbox estableciendo la propiedad display a flex. Después, escribe la opción center en la propiedad justify-content.Por lo tanto, podemos utilizar el CSS Flexbox para centrar un div horizontalmente en CSS.Código de ejemplo:.innerDiv {
Este artículo mostrará cinco formas diferentes de centrar vertical y horizontalmente con HTML+CSS, presentadas en orden cronológico: desde cómo se hacía en el pasado (que deberíamos evitar ahora) hasta las formas modernas de centrar el contenido en el presente.
Durante nuestro proceso de entrevistas, pedí a los candidatos que centraran vertical y horizontalmente un elemento en la página, y la mayoría no pudo dar una respuesta adecuada. Esperemos que este artículo ayude a ello.
Al principio, cuando no había una forma fácil de centrar elementos, utilizábamos tablas para centrar vertical y horizontalmente. Por supuesto, esta es una forma terrible de hacerlo, pero era la única opción disponible en ese momento.
Entonces, pasamos a posicionar los elementos de forma absoluta al 50% del contenedor vertical y horizontalmente, y luego aplicamos un margen negativo de la mitad de la altura y la anchura en la parte superior e izquierda, respectivamente:
Algunas personas pueden decir, “puedes usar las variables CSS y la función calc para evitar esos problemas”, y tendrán razón… ahora. Pero en aquel entonces, las propiedades personalizadas de CSS no eran soportadas por tantos navegadores, y el soporte para calc era ligeramente mejor.