Aprende a centrar elementos en CSS
Vložit
- čas přidán 8. 09. 2024
- Centrar un div, durante mucho tiempo, ha sido un trabajo muy complicado en CSS. ¡Pero estamos en 2022! Y existen diferentes formas para conseguirlo.
Usando flex, grid o absolute, dependiendo de lo que quieras lograr, lo puedes hacer.
En este vídeo de #shorts te enseño cómo lo puedes conseguir.
Tengo diplomado postgrado maestria y un doctorado pero seguire buscando como centrar un div y no me da verguenza decirlo
Por los epiiñtilis.santos.
Es que centrar un div es una ceremonia, un ritual en el preguntas muchas veces a chatgpt para que en 10 repuestas erróneas te de una correcta
Backend dev: esta información vale millones
Nah nah no flipes 😂
elsalvador
Un detalle: no es necesario colocar flex-direction: column; si sólo es un elemento el que se quiere centrar.
Pero es buena práctica ya que se deja preparado en caso de añadir más contenido después.
El asunto es que si se lo deja x defecto (row) el div suele deformarse según el contenido que tenga la pagina y el propio div, colocando el eje sobre la columna se soluciona muchas cosas y es mas cómodo de organizarlo con otros elementos.
Midu, te vi en la platzi conf. Vaya orador, fue una presentación muy buena. Me faltó encontrarte para la foto.
Muchas gracias, Miguel 🤗
Recién aprendí a usar los Flex, jaja, no puedo creer lo fácil que es centrar todo el contenido, aunque se tienen que usar muchas cajas.
En tailwind me aprendí esas clases JAJAJAJA "flex flex-col items-center justify-center"
con display flex podés usar las propiedades justify-content: center; y align-items: center;
amigo te sigo y eres muy instructivo con tus videos, un consejo, en la metodología educativa no se muestran las como hacer las cosas mal, solo se muestra como hacerla bien, una critica constructiva.
Me da gusto saber que la solución que siempre más me gustó a mí es la más correcto, me encanta usar flex-box
Andaba buscando formas distintas de centrar un div con imágen y texto por arriba, está forma de centrar me funcionó perfecto! 🎉
Para centrar horizontalmente
display: block; margin: auto;
Yeah! 🤘😎
Hazte un video de las mejores extensiones please
no sé que acabo de ver ni que es un div, pero ahora si se como hacer eso.. gracias..
Midu me encantaría un curso de css desde cero a experto!
Que genial, necesito más tips de CSS así como este, danos más tips midu.
si es no usar ni flex, ni grid se puede hacer esto .main{position: relative; width: 400px; height: 400px;}, si el texto tiene un widht de 50px y un height de 20px, se puede hacer lo siguiente: .text{position: absolute; top: calc(50% - 10px); left: calc(50% - 25px); }, con esto se logra un centrado perfeto ya que se resta la mitad del elemento quedando exactamente en la mitad de este tanto para izquierda y derecha, como para arriba y abajo.
Usa Tailwind: "flex flex-col justify-center align-center"
Asco
Muchas gracias. Use el código para centrar una section y solo borre la flex-direction para que me quedara como quería.
Sería más fácil al main: display: flex; justify-content: center; align-items: center
Depende de tu situación
@@sebastianestrada1311claro, hay un montón de formas de centrarlo, pero cada una es para cada contexto
@@demianm1845 en realidad uso flexbox para todo es la mas fiable y estable jaja
Me explotó la cabeza 🤯 div center
Gracias
Esto vale Oro Midu!!!
Grande loco al fin uno que explica lo que nesesito
muchas gracias midu, el video es super bueno, pero al ir tan rápido no solo no se puede pausar o tirar atrás sinó que molaria que ahondases más en entender cada cosilla como vh, o el transform que escuche que no se recomienda o si hay más de un elemento o si la pantalla es pequeña... ahora que te dedicas a crear contenido me sabe menos mal pedirte un video como este jeje, y enfocarlo un poco a mobile first complicandolo con un flex que incluya 3 imagenes por ejemplo que con 360px de mobiles pequeños se desajustan al centrarse y los viewports del main aprender a jugarlos mejor por zonas o las imágenes y sus max o min widths o clams o objects fits, que si imgs backgrounds o no, a aprender a enfocarlo todo mejor en mobile first design porque no encuentro sitio que se explique todo con claridad, y menos en español por lo que podria ser un buen beneficio para la habla hispana si haces el gran y definitivo video de mobile first jeje. y si no lo haces... siempre seré fan tuyo igual jaja ;)
Esta información vale millones
Sos un genio. Gracias.
Con justify-itema center puedes y no necesitas la dirección
Yo estaba tratando centrar el texto dentro del bloque, me sirvio la ultima, thx
Más simple. margin-left: auto; margin-right: auto;
Te adoro
Excelente contenido Midu
CON EL ULTIMO ME SALVASTE AAAAA
Finalmente lo conseguí
Porque grid presenta mas problemas que flexbox?
Porque tendríamos que usar column o row si va a ir centrado de todas formas?
Me funcionó gracias
El display flex está bien, pero no es crossbrowsing en todos los navegadores. Ahí te dejo un nuevo método. Al contenedor display table, al elemento, display table-cell, vertical-aling center. Esto es completamente crosbrowsing y funciona en el 100% de los navegadores. El único inconveniente es que el width del table cell siempre será del 100% que el del padre, pero esto puede corregirse con otro div interior que le pongas el tamaño que quieras.
Me sorprende que algo tan básico se me siga olvidando
Genial. Gracias
Pensé que midudev estaba loco hasta que vi el final.
Hola midu admiro mucho tus videos son increíbles 🤯😮 y consejos
Pero podrías hacer una app como Twitch por favor plis Bro :)
Muy bueno!
Los de backend: esto puede valer millones!!
Flutter: Hermano a mí méteme en un Center y te centro lo que sea donde sea piola 👌
CSS: A mí tienes que usarme con al menos 4 estilos diferentes, y sólo te centro ciertas cosas 😭
¿Que extensión usas para ver por un lado el diseño de la página?
te comento que termine el icono de instagram ,voy a ver este
buen domingo
No entiendo una mrd de programación y espero que cuando empieze a estudiarla como carrera profecional pueda entender este video
Excelente video!
Creo que para centrar un solo div no necesitamos flex-direction: column; 🤔
El default (row) tambíen funciona, o será que no estoy teniendo en cuenta algo?
Si aprendiste a maquetar y alinear sin dolores de cabeza, aprendiste todo de CSS, el resto es bienvenido con facilidad.
Solo agregar el tema de la compatibilidad con los navegadores
que plugin usas para que se previsualice abajo? o es otro recorte del navegador??
😂 wow no lo sabia
Sería más fácil text-align: center
Posicion absoluta = troll
Pero la de absolute; no es mejor top,left,right,bottom = 0 ?
como hace para que le salga la vist previa debajo? es alguna extensión?
MUCHAS GRACIAS MIDUUUU!!!
¿Alguien sabe por qué es necesario el flex-direction: column? ¿Qué problema tiene dejarlo en row? Gracias de antemano!!
Ninguno si esta solo, pero supongo que si tenés mas elementos hermanos lo usa para que estos se alineen verticalmente
También recorda que poses usar flex-wrap para que sea automático segun el ancho
No es necesario, esa declaración CSS sobra por completo. Seguramente Midu ha copiado y pegado la solución de otra fuente y no se ha molestado ni en chequearlo.
Aqui lo que somos de la vieja escuela que solo usamos
Por eso mejor usar bootstrap y te soluciona la vida
.flex-container div {
background-color:blue;
margin: 5px;
min-height: 15vh;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
text-align: center;
flex-basis: 100%px;
}
.flex-container div {
background-color:blue;
margin: 0 auto;
min-height: 15vh;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
text-align: center;
flex-basis: 100%px;
}
La primera solución respeta los espacio entre div y div
La segunda solucion centra los elementos respecto al padre
Pero cuando la pantalla es más pequeña el fondo del texto y el texto mismo se apiñan y no dejan espacio
¿alguna solución?
Podrías decirme que carrera fue la que estudiaste?
Uso boostrap y a tomar viento
Faltó display table. XD
Muy bien pero un poco de ejercicio no te hará daño.
curso de css si son tan amables
Todavía recuerdo cuando decían que no usarán FlexBox porque no iba durar 😂
que dios te bendiga con muchos hijos midu
Ahora un div que cubra toda la pantalla.
Que editor de codigo usas, y porfa el tema, indicamelo nuevo sub uwu
*a los backend les gusta esto
Uso flex para todo yo 😂
Chat gpt centrarme este div. Listo en 3 segundos
La solución flexelente!
😂
Nice!
jajaja ponele la antigua etiqueta por fuera del Div xD 🤣🤣🤣🤣
Obsoleto. Va a dejar de funcionar pronto.
Soy back end... El CSS me asusta XD
Yo todo un super dotado: div{margin: 0 auto}
pense encontrar la solucion pero la misma configuracion que estoy usando y para emperorar nada cambio 😭😭
Alguien me explica lo de min-height: 100vh?😢😢
Osea que float: left, ya es historia
Cómo haces para que se vea como estás modificando?
5 años de la universidad para recién aprender esto.
En la universidad no enseñan front
yo utilizaría la etiqueta "center" xD
Y que problema podría llegar a tener display: grid; place-items: center; ⁉️
Lo mismo me pregunté
alguien sabe como centrar un div si le aplique la propiedad fixed? es que estoy haciendo una barra superior de navegacion
me podrías decir que programa estas utilizando en este caso? o si estas usando visual que extensión usas para que te muestre como esta quedando la pagina en tiempo real
codi.link
Yo le ponia margin: auto y listo o solo modificaba los margenes jajaha
alguen sabe por que no me puede funcionar el justify-content: center?, align-item si funciona pero el otro no
Midu como puedo ver el css cómo vos lo estás mostrando en pantalla, lo veo super
Y cómo centrar el texto?
Centra videos ubicado en medio de otros contenedores tambien?? 🥹
Algun tuto de css?
😊
Si no se pone el min-height 100 vh no funciona align ítems
ahora nadie puede saber que no sabia centrar un div
En el último es innecesario el flex-direction 😅
0:10
align="center" se puede en el div?
No
0:01
O le pones al div que quieres centrar otro div padre, y a este padre le pones class="d-flex justify-content-center align-items-center ". Así queda centrado horizontal y vertical (con bootstrap).