Centrar elementos con   solía ser bastante difícil de hacer. Bueno, ya no lo es. Hay muchas maneras diferentes de hacerlo ahora. Y eso es bueno porque es posible que necesitemos diferentes opciones en diferentes escenarios. En este video veremos tres de mis formas favoritas de centrar elementos. Usaremos posicionamiento, luego usaremos flexbox y, por último, usaremos mi cuadrícula CSS de referencia. HTML y CSS  Muy bien, vayamos a ello.   https://youtu.be/XMH4c1xIZtE?embedable=true  Es realmente extraño que haya sido tan difícil durante tanto tiempo simplemente colocar elementos en el centro de un contenedor en la Web. Bueno, el centrado horizontal era fácil, pero el centrado vertical era casi imposible hasta años más recientes.  Uso del posicionamiento CSS para centrar elementos  Este primer método, que utiliza posicionamiento CSS, probablemente ha existido por más tiempo, pero ha evolucionado un poco a medida que han surgido nuevas propiedades. Veamos un ejemplo.  Aquí tenemos este cuadro que queremos centrar en este otro contenedor con el borde rojo. Es un elemento fuerte y se coloca directamente dentro de un elemento   que es este cuadro rojo que estamos viendo aquí.  div  Usaremos posicionamiento absoluto para este método, así que agreguémoslo a nuestro elemento   . strong   strong { position: absolute; }  Ahora, para que esto funcione correctamente, nuestro   deberá crear un contexto de posicionamiento para colocar nuestro elemento. Hay muchas formas diferentes de hacer esto, pero la mejor opción para este ejemplo es utilizar el posicionamiento relativo. div   div { position: relative; }  Ahora podemos colocar nuestro elemento debajo del cincuenta por ciento de la altura de nuestro   y más del cincuenta por ciento del ancho. Para posicionarnos hacia abajo desde arriba podemos usar la nueva propiedad lógica,   con un valor del cincuenta por ciento. Y para posicionarnos desde la izquierda podemos usar   con el mismo valor del cincuenta por ciento. div inset-block-start inset-inline-start     strong { ... inset-block-start: 50%; inset-inline-start: 50%; }  Ok, entonces no está exactamente centrado, ¿verdad?  Bueno, esto se debe a que hemos colocado el elemento en el centro de nuestro   , pero su posición se basa en su esquina superior izquierda. Lo que tenemos que hacer ahora es mover el elemento hacia arriba el cincuenta por ciento de su altura y hacia atrás el cincuenta por ciento de su ancho. Esto lo colocará correctamente en el centro. Pero, ¿cómo podemos hacer esto? div  En realidad es muy fácil. Podemos usar la nueva propiedad   de CSS. El primer valor se trasladará a lo largo del eje x. Necesitamos retroceder el cincuenta por ciento, por lo que agregaremos un valor de cincuenta por ciento negativo. Y el segundo valor se traslada a lo largo del eje y, le daremos el mismo valor de cincuenta por ciento negativo. translate     strong { ... translate: -50% -50%; }  Y ahí vamos. Perfectamente centrado.  Aquí está el ejemplo de trabajo final usando posicionamiento y traducción:   https://codepen.io/brianmtreese/pen/PoLYmKW?embedable=true  Esta es una forma en que podemos hacerlo, pero no es mi favorita.  Usando Flexbox para centrar elementos  Si puedo, prefiero usar Flexbox en lugar de posicionamiento porque es aún más fácil, requiere menos líneas de código, no hay contexto de posicionamiento y, sinceramente, parece una solución mejor y más moderna. Veamos un ejemplo.  Bien, entonces comenzamos desde el mismo punto, tenemos nuestro div externo con el borde rojo y luego nuestro elemento fuerte interno.   Comenzamos haciendo de nuestro div un contenedor flexible con display, flex. Luego podemos alinear nuestro elemento con el centro a lo largo del eje x con la propiedad   y un valor de centro. Y por último, pero no menos importante, podemos alinear a lo largo del eje y con la propiedad   y el mismo valor de centro. justify-content align-items     div { display: flex; justify-content: center; align-items: center; }  Y ahí lo tienes, el elemento está correctamente centrado y esta vez solo se necesitaron tres líneas de código para llegar allí.  Aquí está el ejemplo de trabajo final usando Flexbox:   https://codepen.io/brianmtreese/pen/bGZbWgW?embedable=true  Eso es genial y a veces tengo la necesidad de hacer esto, pero mi forma favorita de colocar elementos en el centro es usar la cuadrícula CSS. Y nuevamente, mis razones para esto son porque es incluso más fácil que   y requiere incluso menos código. flex  Usar cuadrícula para centrar elementos  Ok, el mismo punto de partida con el cuadro rojo y el elemento interior.   Esta vez haremos de nuestro div un contenedor de cuadrícula con un valor de   de   . Ahora, lo bueno aquí es que podemos usar las mismas dos propiedades que usamos para nuestro ejemplo de flexbox si queremos. Podemos agregar   y   . Funciona exactamente de la misma manera. display grid justify-content: center align-items: center   div { display: grid; justify-content: center; align-items: center; }  Es algo gracioso, pero así es como funciona la cuadrícula, puede usar las mismas propiedades de alineación de caja que usa flexbox. Pero, si lo dejamos así, realmente no habría ninguna ventaja en usar grid, ¿verdad?  Bueno, lo que podemos hacer en su lugar es eliminar estas propiedades de alineación y reemplazarlas con la propiedad place-items. Y podemos darle a esta propiedad un valor de centro.     div { display: grid; place-items: center; }  Ahí vamos, ahora lo hemos reducido a solo dos líneas de CSS.  Aquí está el ejemplo de trabajo final usando CSS Grid:   https://codepen.io/brianmtreese/pen/zYbOwoM?embedable=true  Conclusión  Como dije antes, es mucho más fácil de lo que solía ser, eso es seguro. Pero todas estas técnicas siguen siendo muy relevantes y pueden ser necesarias debido a diversas circunstancias, por lo que es bueno conocerlas todas por si acaso. Definitivamente preferiría la menor cantidad de código CSS grid, y si eso no funciona, la mejor opción es flexbox, y si ninguno de los dos funciona, intente posicionar.  También publicado   . aquí

Buy Me a Coffee

Este audio es producido en el idioma original de la historia!

3 técnicas CSS contemporáneas para centrar elementos

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Toque para ganar: Telegram puede incorporar a los próximos 10 mil millones de usuarios de criptomonedas antes de Solana

Valhalla de Floki se une como patrocinador asociado de la gira de la India por Sri Lanka

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

Toque para ganar: Telegram puede incorporar a los próximos 10 mil millones de usuarios de criptomonedas antes de Solana

Valhalla de Floki se une como patrocinador asociado de la gira de la India por Sri Lanka

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps