MAQUETACIÓN Y CENTRADO DE ELEMENTOS

 

 MAQUETACIÓN Y CENTRADO DE ELEMENTOS

📋 ÍNDICE

  1. Introducción a la maquetación CSS

  2. Métodos de centrado

  3. Layouts modernos

  4. Ejercicios prácticos

1️⃣ INTRODUCCIÓN A LA MAQUETACIÓN CSS {#introducción}

Conceptos básicos del box model

css
.elemento {
    /* El modelo de caja */
    width: 300px;        /* Ancho del contenido */
    height: 200px;       /* Alto del contenido */
    padding: 20px;       /* Espacio interno */
    border: 2px solid black; /* Borde */
    margin: 15px;        /* Espacio externo */
    box-sizing: border-box; /* Incluye padding y border en width/height */
}

Display: la propiedad fundamental

css
.display-examples {
    display: block;      /* Ocupa todo el ancho disponible */
    display: inline;     /* Flujo con el texto */
    display: inline-block; /* Mezcla de ambos */
    display: none;       /* Oculta el elemento */
}

2️⃣ MÉTODOS DE CENTRADO {#métodos-centrado}

📌 CENTRADO HORIZONTAL

Para elementos de bloque:

css
/* Método 1: margin auto */
.bloque-centrado {
    width: 300px; /* Requiere un ancho definido */
    margin-left: auto;
    margin-right: auto;
}

/* Método 2: text-align (para contenido inline) */
.contenedor {
    text-align: center;
}

/* Método 3: flexbox */
.contenedor-flex {
    display: flex;
    justify-content: center;
}

Para elementos inline/inline-block:

css
.contenedor {
    text-align: center;
}

.elemento-inline {
    display: inline-block;
}

📌 CENTRADO VERTICAL

Con flexbox (método recomendado):

css
.contenedor {
    display: flex;
    align-items: center;     /* Centrado vertical */
    justify-content: center; /* Centrado horizontal (opcional) */
    height: 300px;
}

Con position absolute:

css
.contenedor {
    position: relative;
    height: 300px;
}

.elemento {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

Con grid:

css
.contenedor {
    display: grid;
    place-items: center; /* ¡Centra horizontal y vertical! */
    height: 300px;
}

🎯 CENTRADO PERFECTO (HORIZONTAL Y VERTICAL)

css
/* Método 1: Flexbox */
.centrado-perfecto-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/* Método 2: Grid */
.centrado-perfecto-grid {
    display: grid;
    place-items: center;
    height: 100vh;
}

/* Método 3: Position + Transform */
.centrado-perfecto-absolute {
    position: relative;
    height: 100vh;
}

.centrado-perfecto-absolute .elemento {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

3️⃣ LAYOUTS MODERNOS {#layouts-modernos}

📱 FLEXBOX - Layouts flexibles

Conceptos básicos:

css
.contenedor-flex {
    display: flex;
    flex-direction: row;      /* row | column */
    flex-wrap: wrap;          /* Los elementos se envuelven */
    justify-content: space-between; /* Distribución horizontal */
    align-items: center;       /* Alineación vertical */
    gap: 20px;                 /* Espacio entre elementos */
}

Ejemplo práctico: Navbar responsive

css
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background-color: #333;
    color: white;
}

.menu {
    display: flex;
    gap: 1.5rem;
    list-style: none;
}

.menu a {
    color: white;
    text-decoration: none;
}

@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
        gap: 1rem;
    }
    
    .menu {
        flex-direction: column;
        align-items: center;
    }
}

🏗️ CSS GRID - Layouts complejos

Conceptos básicos:

css
.grid-contenedor {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* 3 columnas */
    grid-template-rows: auto 200px auto; /* 3 filas */
    gap: 20px;
}

Ejemplo práctico: Layout de página completo

css
.layout-pagina {
    display: grid;
    grid-template-areas: 
        "header header header"
        "sidebar main main"
        "footer footer footer";
    grid-template-columns: 200px 1fr 1fr;
    gap: 20px;
    min-height: 100vh;
    padding: 20px;
}

.header {
    grid-area: header;
    background-color: #f0f0f0;
    padding: 1rem;
    text-align: center;
}

.sidebar {
    grid-area: sidebar;
    background-color: #e0e0e0;
    padding: 1rem;
}

.main {
    grid-area: main;
    background-color: #ffffff;
    padding: 1rem;
}

.footer {
    grid-area: footer;
    background-color: #f0f0f0;
    padding: 1rem;
    text-align: center;
}

Grid responsive automático:

css
.grid-responsive {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.card {
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    text-align: center;
}

4️⃣ EJERCICIOS PRÁCTICOS {#ejercicios}

🎯 EJERCICIO 1: Tarjeta de perfil centrada

html
<div class="card-container">
    <div class="profile-card">
        <img src="avatar.jpg" alt="Avatar" class="avatar">
        <h2>María García</h2>
        <p>Desarrolladora Frontend</p>
        <button>Contactar</button>
    </div>
</div>
css
.card-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.profile-card {
    background: white;
    border-radius: 10px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    max-width: 350px;
}

.avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 auto 1rem;
    display: block;
    object-fit: cover;
}

.profile-card button {
    background: #667eea;
    color: white;
    border: none;
    padding: 10px 30px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}

.profile-card button:hover {
    background: #764ba2;
}

🎯 EJERCICIO 2: Grid de productos responsive

html
<div class="productos-grid">
    <div class="producto">Producto 1</div>
    <div class="producto">Producto 2</div>
    <div class="producto">Producto 3</div>
    <div class="producto">Producto 4</div>
    <div class="producto">Producto 5</div>
    <div class="producto">Producto 6</div>
</div>
css
.productos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
}

.producto {
    background: white;
    padding: 2rem;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}

.producto:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

🎯 EJERCICIO 3: Layout de dashboard

html
<div class="dashboard">
    <header class="dashboard-header">Header</header>
    <nav class="dashboard-nav">Navegación</nav>
    <main class="dashboard-main">
        <h2>Contenido Principal</h2>
        <div class="cards-grid">
            <div class="stat-card">Estadística 1</div>
            <div class="stat-card">Estadística 2</div>
            <div class="stat-card">Estadística 3</div>
            <div class="stat-card">Estadística 4</div>
        </div>
    </main>
    <aside class="dashboard-aside">Sidebar</aside>
    <footer class="dashboard-footer">Footer</footer>
</div>
css
.dashboard {
    display: grid;
    grid-template-areas: 
        "header header header"
        "nav main aside"
        "footer footer footer";
    grid-template-columns: 200px 1fr 250px;
    min-height: 100vh;
    gap: 10px;
    padding: 10px;
}

.dashboard-header {
    grid-area: header;
    background: #333;
    color: white;
    padding: 1rem;
    text-align: center;
}

.dashboard-nav {
    grid-area: nav;
    background: #f0f0f0;
    padding: 1rem;
}

.dashboard-main {
    grid-area: main;
    background: white;
    padding: 1rem;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.stat-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1.5rem;
    border-radius: 8px;
    text-align: center;
}

.dashboard-aside {
    grid-area: aside;
    background: #f9f9f9;
    padding: 1rem;
}

.dashboard-footer {
    grid-area: footer;
    background: #333;
    color: white;
    padding: 1rem;
    text-align: center;
}

@media (max-width: 768px) {
    .dashboard {
        grid-template-areas: 
            "header"
            "nav"
            "main"
            "aside"
            "footer";
        grid-template-columns: 1fr;
    }
}

📝 RESUMEN Y MEJORES PRÁCTICAS

css
/* 🌟 Centrado rápido con Flexbox */
.centrado-rapido {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 🌟 Layout responsivo con Grid */
.grid-responsivo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

/* 🌟 Centrado perfecto con Grid */
.centrado-perfecto {
    display: grid;
    place-items: center;
}

/* 🌟 Distribución con Flexbox */
.distribucion-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

🎯 TIPS IMPORTANTES:

  1. Usa box-sizing: border-box para evitar problemas con padding y width

  2. Flexbox para layouts 1D (filas o columnas)

  3. Grid para layouts 2D (filas y columnas)

  4. Mobile First: diseña primero para móvil y luego usa media queries

  5. Unidades relativas: usa rem, em, % en lugar de px para mejor responsividad

¡Practica estos ejemplos y experimenta combinando diferentes técnicas! La maquetación CSS se domina con la práctica constante. 🚀

Comentarios

Publicar un comentario

Entradas más populares de este blog

Tutorial de CSS: De Cero a Estilizar tu Primera Página Web

1. ¿Qué es CSS? CSS son las siglas de  Cascading Style Sheets  (Hojas de Estilo en Cascada). Es un lenguaje que usamos para describir la  presentación  de un documento escrito en HTML. Mientras que HTML se encarga de la estructura y el contenido (títulos, párrafos, imágenes), CSS se encarga de cómo se ve ese contenido (colores, fuentes, tamaños, posición). 2. ¿Cómo se integra CSS con HTML? Hay tres formas principales de incluir CSS en tu proyecto: CSS en línea (Inline):  Se aplica directamente a una etiqueta HTML usando el atributo  style . Es el método menos recomendado porque mezcla contenido con presentación y es difícil de mantener. html < p style = " color : blue ; font-size : 18px ; " > Este es un párrafo azul. </ p > CSS interno (Internal):  Se escribe dentro de la etiqueta  <style>  en la sección  <head>  del documento HTML. Es útil para páginas individuales o para hacer pruebas rápidas. html <...
Leer más

layouts

   "Explica el siguiente código HTML y CSS poniendo especial énfasis en: La maquetación de cajas : cómo se estructuran visualmente cada uno de los elementos (body, tarjeta, imagen, textos, botón). El flujo natural de las cajas : cómo se comportan los elementos en el flujo por defecto (elementos de bloque vs. en línea) y cómo se van posicionando unos respecto a otros. La agrupación de elementos : cómo se relacionan visualmente los elementos que están dentro de un mismo contenedor. La jerarquía padre-hijo : cómo afectan las propiedades del elemento padre a sus hijos directos e indirectos (herencia, contención, y cómo el espacio del padre condiciona el espacio de los hijos). f Tutorial: Creando una Plantilla de Registro HTML/CSS Objetivo del Proyecto Vamos a crear la estructura básica de una página web que contiene: Un menú de navegación con 4 opciones. Un formulario de registro de usuario. Estilos CSS para que todo se vea ordenado y profesional. Paso 1: Entendiendo la Estructura...
Leer más

Proyecto Práctico: Tarjeta de Perfil

"Explica el siguiente código HTML y CSS poniendo especial énfasis en: La maquetación de cajas : cómo se estructuran visualmente cada uno de los elementos (body, tarjeta, imagen, textos, botón). El flujo natural de las cajas : cómo se comportan los elementos en el flujo por defecto (elementos de bloque vs. en línea) y cómo se van posicionando unos respecto a otros. La agrupación de elementos : cómo se relacionan visualmente los elementos que están dentro de un mismo contenedor. La jerarquía padre-hijo : cómo afectan las propiedades del elemento padre a sus hijos directos e indirectos (herencia, contención, y cómo el espacio del padre condiciona el espacio de los hijos).    Creando una Tarjeta de Perfil con HTML y CSS Descripción del Proyecto Vamos a crear una tarjeta de perfil profesional que contiene: Foto de perfil circular Nombre de la persona Descripción breve Ubicación Botón interactivo con efectos Al final, tendremos una tarjeta moderna y responsive que se centra en la pa...
Leer más