<![CDATA[ Sheila Anguiano - freeCodeCamp.org ]]> https://www.freecodecamp.org/espanol/news/ https://cdn.freecodecamp.org/universal/favicons/favicon.png <![CDATA[ Sheila Anguiano - freeCodeCamp.org ]]> https://www.freecodecamp.org/espanol/news/ Eleventy Mon, 15 Jun 2026 12:38:23 +0000 60 <![CDATA[ Como centrar cualquier cosa en CSS usando Flexbox y Grid ]]> https://www.freecodecamp.org/espanol/news/como-centrar-cualquier-cosa-en-css-usando-flexbox-y-grid/ 6192d1f931882c095864e758 Tue, 07 Dec 2021 12:00:00 +0000 Artículo original escrito por Joy Shaheb
Artículo original How to Center Anything in CSS Using Flexbox and Grid
Traducido y adaptado por Sheila Anguiano


Hoy voy a mostrarte como centrar y alinear tu contenido con CSS, así como revisaremos varias tecnicas de alineamineto, así que empecemos.?

Tabla de Contenidos ->

Como usar Flexbox para:

  • Centrar horizontalmente
  • Centrar verticalmente
  • Centrar horizontal y verticalmente

Como usar grid para:

  • Centrar horizontalmente
  • Centrar verticalmente
  • Centrar vertical y horizontalmente
  • La propiedad "transform" y "position"
  • La propuedad de margen o "margin"
  • Información adicional
  • Conclusión
Métodos
Métodos

Pero, espera...

Frame-35--3-

Antes que nada, debemos entender:

  • Que es el eje principal (main axis)
  • Eje transversal (cross axis)

¿Qué es el eje principal en CSS?

También lo puedes llamar el:

  • Eje X (X-Axis)
  • Eje principal
  • Línea horizontal

La línea de izquierda a derecha es el eje principal.

Frame-71
Main Axis

¿Qué es el Cross Axis en CSS?

  • Eje Y (Y-Axis)
  • Eje transversal
  • Línea vertical

Es la línea que va de arriba a abajo en el eje transversal

Frame-72
Cross Axis

Configuración del proyecto

Frame-54

Para experimentar con todas las propiedades y valores, escribe el siguiente código en tu editor.

HTML

Escribe lo siguiente dentro de la etiqueta <body>:

<div class="container">

   <div class="box-1"> </div>
    
</div>

CSS

Elimina los estilos de base del navegador (agent stylesheet) para trabajar de forma más uniforme y precisa:

*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

Selecciona la clase .container y dale el valor de 100vh. De lo contrario, no podemos observar el resultado en el eje vertical:

.container{
   height: 100vh;
}

Agrega las siguientes reglas a la clase .box-1:

.box-1{
   width: 120px;
   height: 120px;
   background-color: skyblue;
   border: 2px solid black;
}

¡Ya esta lista la configuración, empecemos a programar!

Frame-3--5-

Como usar Flexbox para centrar lo que sea

Thumbnail-hashnode

Podemos usar Flexbox para alinear nuestro contenido en el  div entre el eje X y Y. Primero, necesitamos escribir la siguiente propiedad y valor display: flex; dentro de nuestra clase .container:

.container{
   display: flex;
   
   height: 100vh;
}

Ahora podemos experimentar con estas 2 propiedades:

  • justify-content
  • align-items

Como centrar horizontalmente utilizando Flexbox

Podemos usar la propiedad  justify-content  para hacer lo siguiente si usamos los valores ?

valores de Flexbox para la propiedad justify-content
values of flexbox justify-content property

Para experimentar con los valores, escribe el siguiente código?

.container{
   display: flex;
   height: 100vh;
   
 /* Cambia los valores  ? para experimentar*/
   justify-content: center;
}

El resultado se verá así?

Frame-6--2-
Resultado de justify-content usando flexbox

Como centrar verticalmente usando Flexbox

Usando la propiedad align-items  y usando los siguientes valores ?

valores de Flexbox para la propiedad align-items
values of Flexbox align-items property

Para experimentar con los valores, escribe el siguiente código?

.container{
   height: 100vh;
   display: flex;
   
 /* Cambia los valores para experimentar ?*/
   align-items: center;
}

El resultado se debe ver así?

Frame-7--4-
Result of align-items flexbox

Como centrar un <div> horizontal y verticalmente usando Flexbox

Ahora bien, podemos combinar justify-content y align-items para alinear un <div> horizontal y verticalmente.

Escribe las siguientes líneas?

.container{
   height: 100vh;
   display: flex;
   
/* Cambia las siguientes lineas para experimentar?*/
   align-items: center;
   justify-content: center;
}

El resultado será algo parecido a esto ?

Frame-8--1-
div centrado horizontal y verticalmente

Para más información sobre Flexbox puedes visitar este link de MDN.

Como usar CSS Grid para centrar lo que sea

Frame-70

Podemos usar grid para alinear nuestro contenido en un  div por medio de los ejes X y Y. Primero, necesitamos escribir la propiedad y valor display: grid; dentro de nuestra clase .container:

.container{
   display: grid;
   
   height: 100vh;
}

Ahora podemos experimentar con estas dos propiedades:

  • justify-content
  • align-content

Alternativamente, también puedes usar estas 2 propiedades:

  • justify-items
  • align-items

Como centrar lo que sea horizontalmente utilizando CSS Grid

Podemos usar la propiedad justify-content con los siguientes valores para obtener los siguientes resultados ?

valores de grid para la propiedad justify-content
values of Grid justify-content property

Escribe los siguientes ?

.container{
   height: 100vh;
   display: grid;

  /* Experimenta? */
   justify-content: center;
}

El resultado será algo similar a esto?

resultado de justify-content
result of justify-content grid

Como centrar lo que sea verticalmente usando CSS Grid

Usa la propiedad  align-content con los siguientes valores para obtener los siguientes resultados ?

align-content-1
Valores para la propiedad align-content

Escribe el siguiente código ?

.container{
   height: 100vh;
   display: grid;
   
  /*  Cambia los valores para experimentar*/
   align-content: center;
}

Para obtener el siguiente resultado?

Frame-7--4--1
result of align-content grid

Como centrar un <div> horizontal y verticalmente por medio de CSS Grid

Finalmente, podemos combinar  justify-content y align-content para alinear nuestro <div> horizontal y verticalmente por medio del siguiente código ?

.container{
   height: 100vh;
   display: grid;
    
/* Cambia los valores para experimentar? */
   align-content: center;
   justify-content: center;
}

Resultado?

Frame-8--1--1
Centering a div Horizontally & vertically with Grid

Alternativa

Del mismo modo, también puedes usar justify-items y align-items para obtener los mismos resultados:

.container{
   height: 100vh;
   display: grid;
    
/* Experimenta? */
   align-items: center;
   justify-items: center;
}

La propiedad place-content de CSS Grid

Esta es una abreviación o shorthand de las siguientes dos propiedades de CSS Grid->

  • justify-content
  • align-content
.container{
   height: 100vh;
   display: grid;
   
   place-content: center;
}

Donde obtenemos el mismo resultado ?

Frame-8--1--2
Centering a div Horizontally & vertically

Para más información sobre Grid, visita el MDN en español

¡Toma un descanso!

Frame-67--1-

Como usar  la  propiedad position de CSS para centrar lo que sea

Frame-12-1

Esto es una combinación de las siguientes propiedades ->

  • position
  • top, left
  • transform, translate

Escribe el siguiente código ?

.container{
   height: 100vh;
   position: relative;
}

Así como lo siguiente:

.box-1{
   position: absolute;
   
   width: 120px;
   height: 120px;
   background-color: skyblue;
   border: 2px solid black;
}

Primero, hay que entender cuál es el punto central de un <div>

Como norma, el punto central de un <div> es la esquina superior izquierda?

Frame-9
Default Center point of a div

Lo cual explica el siguiente comportamiento que parece contra intuitivo  ?

El div no esta precisamente en el centro
Box is not at exact center 

Observa, como la caja no esta exactamente en el centro de la imagen de arriba ?

Pero escribiendo la siguiente línea ?

transform: translate(-50%,-50%);

Arreglamos este problema?

Nuevo punto central del <div>
New Center point of our div

Y obtenemos este resultado ?

Ahora el <div> esta centrado
Box is at exact center point

¿Qué es la propiedad translate de CSS?

translate combina en una propiedad las siguientes 3  ->

  • translateX
  • translateY
  • translateZ

Como centrar un <div> horizontalmente por medio de la propiedad position

Vamos a utilizar la propiedad left dentro de nuestra clase .box-  ?

.box-1{
/* Más código */	

   left: 50%;
   transform: translate(-50%);
}

Y obtenemos el siguiente resultado ?

Resultado de usar las propiedades left y transform
result of left & transform property

Como centrar un <div> verticalmente usando la propiedad position

Ahora, usaremos la propiedad top dentro de la clase box-  ?

.box-1{
/* Código de prueba comentado */	

   top: 50%;
   transform: translate(0,-50%);
}

Obteniendo lo siguiente ?

Resultado de top y transform
result of top & transform property

Como centrar un div horizontal y verticalmente por medio de la propiedad position de CSS

Para obtener este resultado, combinaremos las siguientes propiedades ->

  • top, left
  • transform, translate
.box-1{
/* Código de prueba abajo */	

   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
}
Resultado de position y transform
result of position & transform property

Como usar la propiedad margin para centrar cualquier cosa

Frame-73--2-

La propiedad margen combina los valores de estas 4 propiedades

  • margin-top, margin-bottom
  • margin-left, margin-right

Escribe el siguiente código para empezar ?

.container{
   height: 100vh;
   
   display: flex;
}

.box-1{
   width: 120px;
   height: 120px;
   background-color: skyblue;
   border: 2px solid black;
}

Como centrar un <div> horizontalmente utilizando la propiedad margin

Vamos a usar la propiedad margin dentro de la clase .box-1 class. Escribe lo siguiente ?

.box-1{
 //Otro código aquí 
   
  margin: 0px auto;	
}

El resultado debe verse así?

Resultado de la propiedad margin
result of CSS margin Property

Como centrar un <div> verticalmente usando la propiedad margin de CSS

De nuevo usando la propiedad  margin  dentro de la clase .box-1 class. ?

.box-1{
 //Otro código
   
  margin: auto 0px;	
}

Resultado ?

Resultado de la propiedad Margin
result of CSS margin property

Como centrar un <div> horizontal y verticalmente por medio de la propiedad margin de CSS

Volviendo a usar nuestra clase .box  y usando de nuevo la propiedad margin  ?

.box-1{
 //Más código aquí 
   
  margin: auto auto;	
}

Resultado?

Resultado de la propiedad Margin
Result of CSS margin property

Reconocimientos

Conclusión

Ahora puedes alinear tu contenido de forma confidente usando alguno de estos cuatro métodos.

Aquí tienes una medalla por leer hasta el final ❤️

Sugerencias y críticas constructivas son bienvenidas ❤️

Alt Text

YouTube / Joy Shaheb

LinkedIn / Joy Shaheb

Twitter / JoyShaheb

Instagram / JoyShaheb

]]> <![CDATA[ Como crear un mensaje de alerta o ventana emergente en JavaScript ]]> https://www.freecodecamp.org/espanol/news/como-crear-un-mensaje-de-alerta-o-ventana-emergente-en-javascript/ 5feac9938c7cd154bb98145f Tue, 23 Feb 2021 07:29:23 +0000

Las ventanas de diálogo (o cuadros de texto) conocidos en inglés como "Popup Windows" son ventanas modales utilizadas para notificar, advertir o pedir información al usuario.

Las ventanas diálogo también son una forma de prevenir que el usuario interactué con otras partes del programa hasta que el cuadro de texto haya sido cerrado, por tal motivo es recomendable no usarlos en exceso.

Hay tres tipos de ventanas de diálogo que pueden ser creadas con sus respectivos métodos en JavaScript:

Alert

El método alerta  window.alert(), despliega un cuadro de texto el cual no requiere información por parte del usuario. Una vez que la función es invocada, el mensaje de alerta aparecerá con el aviso (opcional) correspondiente. El usuario necesitará confirmar el mensaje para que el mensaje de alerta desaparezca.

Ejemplo:

window.alert("Bienvenido a nuestro sitio web");

Confirm

El método de confirmación window.confirm(), es similar al  window.alert(), pero además muestra un botón de cancelación en el cuadro de texto. Los botones reflejan los valores booleanos: verdadero para OK y falso para Cancelar

Ejemplo:

var resultado = window.confirm('Estas seguro?');
if (resultado === true) {
    window.alert('Okay, si estas seguro.');
} else { 
    window.alert('Pareces indeciso');
}
MDN Confirm Example

Prompt

El método para solicitar información window.prompt(), es generalmente utilizado para requerir información del usuario. Esta función puede tomar dos argumentos, los cuales pueden ser opcionales: el primero es el mensaje que se mostraría al usuario, y el segundo es un valor predeterminado que se mostraría en el cuadro de texto.

Ejemplo:

var edad = prompt('Cuantos años tienes?', '100');

MDN Prompt Example

Otras opciones con diferente diseño:

Si los patrones de diseño estándar de las ventanas de diálogo de JavaScript no son de tu agrado, las puedes substituir con varias de las bibliotecas de interfaz de usuario (UI), como por ejemplo SweetAlert que ofrece buenos remplazos paral los modales estándar de JavaScript. Puedes incluirlo en tu HTML por medio de una Red de distribución de contenidos (CDN) y comenzar a usarlo.

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

La sintaxis es la siguiente: swal(titulo, subtitulo, tipoDeMensaje)

swal("Oops!", "Something went wrong on the page!", "error");

El código de arriba produciría la siguiente ventana:

SweetAlert Example

SweetAlert de ninguna manera es el único substituto para ventanas modales, pero es decente y fácil de implementar

Traducido del artículo -How to Build a JavaScript Alert Box or Popup Window

]]>