En este tutorial, aprenderás a crear un diseño centrado absolutamente utilizando HTML y CSS. Este diseño constará de un contenedor azul que ocupa toda la pantalla, una columna amarilla dentro de ese contenedor y un cuadrado blanco centrado en esa columna.
Paso 1: Estructura HTML Básica
Comencemos creando un documento HTML básico. Abre tu editor de código favorito y escribe el siguiente código:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="estilos.css">
<title>Centrado Absoluto</title>
</head>
<body>
<!-- Aquí va nuestro contenido centrado -->
<div class="contenedor-azul">
<div class="col-4 col-4-amarilla">
<div class="cuadrado">
<!-- Contenido del cuadrado -->
<p>Contenido centrado</p>
</div>
</div>
</div>
</body>
</html>
...
Paso 2: Estilos CSS
Ahora, crearemos un archivo de estilos CSS llamado estilos.css para aplicar el centrado. Asegúrate de tener este archivo en la misma carpeta que tu archivo HTML. Aquí está el código CSS:
body, html {
height: 100%;
margin: 0;
}
.contenedor-azul {
width: 100%;
height: 100%;
background-color: #3498db; /* Azul */
display: flex;
justify-content: center;
align-items: center;
}
.col-4-amarilla {
background-color: #f39c12; /* Amarillo */
padding: 20px;
border-radius: 8px;
display: flex;
justify-content: center;
}
.cuadrado {
width: 300px;
height: 300px;
background-color: #ffffff; /* Blanco */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: auto; /* Añadido para centrar horizontalmente */
}
Paso 3: Explicación del Código
body, html: Establecemos el cuerpo y el documento HTML para ocupar el 100% de la altura de la ventana. Usamos display: flex para activar el modelo de caja flexible.
align-items, justify-content: Estas propiedades flexbox se utilizan para centrar el contenido tanto vertical como horizontalmente.
.contenedor: Creamos una clase contenedor y le damos una posición relativa. Esto es esencial para que el contenido se posicione absolutamente con respecto a este contenedor.
.contenido: La clase contenido se posiciona absolutamente dentro de su contenedor, y text-align: center se utiliza para centrar el texto dentro del contenedor.
Resultado Final
Con estos pasos, has creado un diseño centrado absolutamente con un contenedor azul que ocupa toda la pantalla, una columna amarilla dentro de ese contenedor y un cuadrado blanco centrado en esa columna. Puedes personalizar los colores, tamaños y estilos según tus preferencias. ¡Este diseño es flexible y puede servir como base para proyectos centrados y atractivos!
Utilizando Bootstrap
Ahora, aprenderás a crear un diseño centrado utilizando las clases de Bootstrap. Este diseño incluirá un contenedor, una fila, y una columna que contendrá un cuadro con un fondo amarillo y un área blanca para el contenido.
Paso 1: Enlace a Bootstrap
Asegúrate de incluir el enlace a la hoja de estilo de Bootstrap en el encabezado de tu HTML. Puedes hacerlo añadiendo la siguiente línea en la sección <head>:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
Paso 2: Estructura HTML Básica
Crea la estructura básica del documento HTML. En el <body>, utiliza las clases de Bootstrap para lograr el centrado absoluto:
<body class="bg-primary d-flex align-items-center justify-content-center vh-100"> <!-- Contenido centrado va aquí --> </body>
- La clase bg-primary establece el color de fondo del cuerpo como azul.
- d-flex se utiliza para crear un contenedor flexible.
- align-items-center y justify-content-center centran el contenido vertical y horizontalmente.
- vh-100 asegura que el cuerpo ocupe el 100% de la altura de la ventana.
Paso 3: Estructura del Contenido con Bootstrap
Dentro del cuerpo, utiliza las clases de Bootstrap para organizar el contenido:
<div class="container">
<div class="row">
<div class="col-md-4 mx-auto bg-warning p-4 rounded">
<div class="bg-white p-4 text-center">
<p>Contenido centrado</p>
</div>
</div>
</div>
</div>
- container crea un contenedor con márgenes laterales según el ancho del dispositivo.
- row define una fila para contener las columnas.
- col-md-4 especifica que esta columna ocupará 4 columnas en dispositivos medianos y superiores.
- mx-auto se utiliza para centrar horizontalmente la columna dentro de su contenedor.
- bg-warning establece el fondo de la columna como amarillo.
- p-4 agrega relleno alrededor de la columna.
- rounded da bordes redondeados a la columna.
Paso 4: Personalización
Puedes personalizar los colores, tamaños y estilos según tus preferencias. Este enfoque Bootstrap proporciona una estructura organizada y fácil de usar para lograr el centrado absoluto. ¡Experimenta con las clases de Bootstrap y crea diseños centrados en tus proyectos web!
aqui te dejo el codigo completo en bootstrap
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<title>Centrado Absoluto con Bootstrap</title>
</head>
<body class="bg-primary d-flex align-items-center justify-content-center vh-100">
<div class="container">
<div class="row">
<div class="col-md-4 mx-auto bg-warning p-4 rounded">
<div class="bg-white p-4 text-center">
<p>Contenido centrado</p>
</div>
</div>
</div>
</div>
</body>
</html>
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias