CENTRAR

 

CENTRADO SIN FLEXBOX NI GRID

馃搵 M脡TODOS TRADICIONALES DE CENTRADO

Te voy a mostrar todas las formas de centrar usando solo CSS cl谩sico (sin Flexbox ni Grid):

1️⃣ CENTRADO DE TEXTO

馃搶 Centrado horizontal de texto

css
/* Para texto en elementos de bloque */
.texto-centrado {
    text-align: center;
}

/* Para texto en elementos espec铆ficos */
p {
    text-align: center;
}

h1 {
    text-align: center;
}

/* Texto centrado en un contenedor */
.contenedor {
    width: 100%;
    text-align: center;
}

馃搶 Centrado vertical de texto

M茅todo 1: Line-height (para una l铆nea)

css
/* Cuando solo hay UNA l铆nea de texto */
.boton {
    height: 50px;
    line-height: 50px; /* Mismo valor que el height */
    text-align: center;
    border: 1px solid black;
}

/* Ejemplo pr谩ctico */
.boton-suscripcion {
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    background: #007bff;
    color: white;
    text-align: center;
}

M茅todo 2: Padding vertical (para m煤ltiples l铆neas)

css
/* Para varias l铆neas de texto */
.tarjeta {
    width: 200px;
    padding: 30px 20px; /* padding vertical igual */
    text-align: center;
    border: 1px solid #ccc;
}

/* Ejemplo con art铆culo */
.articulo {
    max-width: 300px;
    padding: 40px 20px;
    text-align: center;
    background: #f9f9f9;
}

.articulo h2 {
    margin-bottom: 15px;
}

.articulo p {
    margin: 0;
    line-height: 1.6;
}

M茅todo 3: Display: table-cell

css
.contenedor-table {
    display: table;
    width: 300px;
    height: 200px;
    border: 1px solid black;
}

.texto-vertical {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

2️⃣ CENTRADO DE CAJAS (DIVS, IM脕GENES, ELEMENTOS)

馃搶 CENTRADO HORIZONTAL DE CAJAS

M茅todo 1: Margin: auto (el cl谩sico)

css
/* Para elementos de bloque con ancho definido */
.caja {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    background: lightblue;
    padding: 20px;
    text-align: center;
}

/* Versi贸n abreviada */
.caja {
    width: 300px;
    margin: 0 auto;
    background: lightblue;
}

M茅todo 2: Posicionamiento absoluto

css
.contenedor-relativo {
    position: relative;
    height: 200px;
    border: 2px solid black;
}

.caja-absoluta {
    position: absolute;
    width: 200px;
    left: 50%;
    margin-left: -100px; /* Mitad del ancho */
    background: lightgreen;
    padding: 10px;
}

M茅todo 3: Transform (m谩s preciso)

css
.contenedor-relativo {
    position: relative;
    height: 200px;
    border: 2px solid black;
}

.caja-transform {
    position: absolute;
    width: 200px;
    left: 50%;
    transform: translateX(-50%);
    background: lightcoral;
    padding: 10px;
}

馃搶 CENTRADO VERTICAL DE CAJAS

M茅todo 1: Posicionamiento absoluto con altura conocida

css
.contenedor {
    position: relative;
    height: 300px;
    border: 2px solid black;
}

.caja-vertical {
    position: absolute;
    height: 100px;
    top: 50%;
    margin-top: -50px; /* Mitad de la altura */
    width: 200px;
    background: lightyellow;
    padding: 10px;
    text-align: center;
}

M茅todo 2: Transform (cuando no sabes la altura)

css
.contenedor {
    position: relative;
    height: 300px;
    border: 2px solid black;
}

.caja-vertical {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 200px;
    background: lightpink;
    padding: 10px;
    text-align: center;
}

M茅todo 3: Display: table-cell

css
.contenedor-table {
    display: table;
    width: 100%;
    height: 300px;
    border: 2px solid black;
}

.caja-table {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.caja-table div {
    display: inline-block;
    width: 200px;
    padding: 20px;
    background: lightseagreen;
    color: white;
}

馃幆 CENTRADO PERFECTO (HORIZONTAL + VERTICAL)

M茅todo 1: Position + Transform

css
.contenedor-perfecto {
    position: relative;
    height: 400px;
    border: 3px solid #333;
}

.caja-perfecta {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 250px;
    padding: 30px;
    background: #4CAF50;
    color: white;
    text-align: center;
    border-radius: 10px;
}

M茅todo 2: Table-cell (cl谩sico)

css
.contenedor-table-perfecto {
    display: table;
    width: 100%;
    height: 400px;
    border: 3px solid #333;
}

.celda-centrada {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.caja-centrada {
    display: inline-block;
    width: 250px;
    padding: 30px;
    background: #2196F3;
    color: white;
    text-align: center;
    border-radius: 10px;
}

3️⃣ EJERCICIOS PR脕CTICOS SIN FLEXBOX NI GRID

馃幆 EJERCICIO 1: Bot贸n centrado en un hero section

html
<div class="hero">
    <div class="hero-contenido">
        <h1>T铆tulo Principal</h1>
        <p>Descripci贸n del sitio web</p>
        <a href="#" class="boton-hero">Clic aqu铆</a>
    </div>
</div>
css
.hero {
    position: relative;
    height: 500px;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('fondo.jpg');
    background-size: cover;
}

.hero-contenido {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    width: 80%;
    max-width: 600px;
}

.hero-contenido h1 {
    font-size: 48px;
    margin-bottom: 20px;
}

.hero-contenido p {
    font-size: 20px;
    margin-bottom: 30px;
}

.boton-hero {
    display: inline-block;
    padding: 15px 40px;
    background: #ff5722;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    line-height: 1;
}

馃幆 EJERCICIO 2: Tarjeta de producto centrada

html
<div class="pagina-producto">
    <div class="tarjeta-producto">
        <img src="producto.jpg" alt="Producto" class="imagen-producto">
        <h2 class="titulo-producto">Producto Incre铆ble</h2>
        <p class="descripcion">Descripci贸n del producto con caracter铆sticas 煤nicas</p>
        <span class="precio">$99.99</span>
        <button class="boton-comprar">A帽adir al carrito</button>
    </div>
</div>
css
.pagina-producto {
    position: relative;
    min-height: 100vh;
    background: #f5f5f5;
}

.tarjeta-producto {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 350px;
    padding: 30px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    text-align: center;
}

.imagen-producto {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin: 0 auto 20px;
    display: block;
    object-fit: cover;
    border: 3px solid #ff5722;
}

.titulo-producto {
    font-size: 24px;
    margin-bottom: 10px;
    color: #333;
}

.descripcion {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
}

.precio {
    display: block;
    font-size: 28px;
    color: #ff5722;
    font-weight: bold;
    margin-bottom: 20px;
}

.boton-comprar {
    padding: 12px 30px;
    background: #ff5722;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.3s;
}

.boton-comprar:hover {
    background: #f4511e;
}

馃幆 EJERCICIO 3: Layout de columnas iguales

html
<div class="contenedor-columnas">
    <div class="columna">
        <h3>Columna 1</h3>
        <p>Contenido de la primera columna</p>
    </div>
    <div class="columna">
        <h3>Columna 2</h3>
        <p>Contenido de la segunda columna</p>
    </div>
    <div class="columna">
        <h3>Columna 3</h3>
        <p>Contenido de la tercera columna</p>
    </div>
</div>
css
.contenedor-columnas {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden; /* Clearfix */
    padding: 20px;
}

.columna {
    float: left;
    width: 33.33%;
    padding: 0 15px;
    box-sizing: border-box;
}

.columna h3 {
    text-align: center;
    margin-bottom: 15px;
}

.columna p {
    text-align: justify;
    line-height: 1.6;
}

/* Para navegadores antiguos */
.contenedor-columnas:before,
.contenedor-columnas:after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive */
@media (max-width: 768px) {
    .columna {
        width: 100%;
        float: none;
        margin-bottom: 20px;
    }
}

馃幆 EJERCICIO 4: Modal centrado

html
<div class="modal-overlay">
    <div class="modal">
        <h2 class="modal-titulo">Confirmaci贸n</h2>
        <p class="modal-mensaje">¿Est谩s seguro de querer continuar?</p>
        <div class="modal-botones">
            <button class="btn-cancelar">Cancelar</button>
            <button class="btn-confirmar">Confirmar</button>
        </div>
    </div>
</div>
css
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    padding: 30px;
    background: white;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.modal-titulo {
    font-size: 24px;
    margin-bottom: 15px;
    color: #333;
}

.modal-mensaje {
    font-size: 16px;
    color: #666;
    margin-bottom: 25px;
    line-height: 1.5;
}

.modal-botones {
    text-align: center;
}

.modal-botones button {
    padding: 10px 25px;
    margin: 0 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: opacity 0.3s;
}

.btn-cancelar {
    background: #e0e0e0;
    color: #333;
}

.btn-confirmar {
    background: #4CAF50;
    color: white;
}

.modal-botones button:hover {
    opacity: 0.8;
}

馃幆 EJERCICIO 5: Header con logo centrado y men煤s laterales

html
<div class="header-clasico">
    <div class="header-left">
        <a href="#">Men煤 Izquierdo</a>
    </div>
    
    <div class="header-center">
        <img src="logo.png" alt="Logo" class="logo">
    </div>
    
    <div class="header-right">
        <a href="#">Men煤 Derecho</a>
    </div>
</div>
css
.header-clasico {
    width: 100%;
    background: #333;
    overflow: hidden;
    padding: 15px 0;
}

.header-left {
    float: left;
    width: 33.33%;
    text-align: left;
}

.header-center {
    float: left;
    width: 33.33%;
    text-align: center;
}

.header-right {
    float: left;
    width: 33.33%;
    text-align: right;
}

.header-left a,
.header-right a {
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    display: inline-block;
}

.logo {
    height: 40px;
    display: inline-block;
}

/* Clearfix */
.header-clasico:after {
    content: "";
    display: table;
    clear: both;
}

@media (max-width: 600px) {
    .header-left,
    .header-center,
    .header-right {
        width: 100%;
        text-align: center;
        float: none;
        margin: 5px 0;
    }
}

馃摑 RESUMEN DE T脡CNICAS TRADICIONALES

css
/* 馃専 Para centrar texto */
.texto-centrado {
    text-align: center;
}

/* 馃専 Para centrar elementos de bloque */
.bloque-centrado {
    width: 300px;
    margin: 0 auto;
}

/* 馃専 Para centrado vertical de texto (1 l铆nea) */
.una-linea {
    height: 50px;
    line-height: 50px;
    text-align: center;
}

/* 馃専 Para centrado perfecto con position */
.contenedor {
    position: relative;
    height: 400px;
}

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

/* 馃専 Para centrado con table-cell */
.contenedor-table {
    display: table;
    width: 100%;
    height: 300px;
}

.elemento-table {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.elemento-table > * {
    display: inline-block;
}

馃幆 COMPARATIVA R脕PIDA

Situaci贸nM茅todo Recomendado
Texto horizontaltext-align: center
Una l铆nea verticalline-height = height
Bloque horizontalmargin: 0 auto
Centrado perfectoposition + transform
M煤ltiples elementosdisplay: table-cell
Imagen en celdavertical-align: middle

⚠️ TRUCOS Y CONSEJOS

css
/* Para centrar una imagen dentro de un contenedor */
.contenedor-imagen {
    text-align: center;
    line-height: 200px; /* Altura del contenedor */
}

.contenedor-imagen img {
    vertical-align: middle;
}

/* Para centrar elementos inline-block */
.contenedor {
    text-align: center;
}

.contenedor .elemento {
    display: inline-block;
    /* No necesita margin */
}

/* Para centrar absolute cuando no sabes dimensiones */
.elemento {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 200px;
    height: 100px;
}

¡Estos m茅todos tradicionales son la base del CSS y siguen siendo muy 煤tiles! Te recomiendo practicar cada uno para entender bien c贸mo funcionan.

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