9.1 Centrando horizontalmente
Centrar elementos en una página web es una de las tareas básicas del diseño web. Permite crear diseños estéticamente agradables y fáciles de leer. A continuación, veremos diferentes métodos para centrar elementos horizontal y verticalmente, utilizando técnicas modernas de CSS.
1. Centrando elementos de bloque con margin: auto
Una de las maneras más fáciles de centrar elementos de bloque es usar margin: auto.
Ejemplo:
.centered-box {
width: 200px;
height: 100px;
background-color: #3498db;
margin: 0 auto;
}
<div class="centered-box"></div>
Explicación del código:
margin: 0 auto;: establece márgenes automáticos a la izquierda y a la derecha, centrando el elemento horizontalmente
2. Centrando elementos en línea con text-align
Para centrar elementos en línea o embebidos dentro de un elemento de bloque, se puede usar la propiedad text-align: center.
Ejemplo:
.container {
text-align: center;
background-color: #f1c40f;
padding: 20px;
}
.inline-element {
background-color: #e74c3c;
display: inline-block;
padding: 10px;
color: white;
}
<div class="container">
<div class="inline-element">Elemento en línea</div>
</div>
Explicación del código:
text-align: center;: centra los elementos en línea dentro del contenedor de bloque
3. Centrando elementos con Flexbox
Flexbox proporciona una forma flexible y sencilla de centrar elementos tanto horizontal como verticalmente.
Ejemplo:
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #2ecc71;
}
.centered-box {
width: 200px;
height: 100px;
background-color: #3498db;
}
<div class="flex-container">
<div class="centered-box"></div>
</div>
Explicación del código:
display: flex;: establece el contenedor como Flexboxjustify-content: center;: centra los elementos horizontalmentealign-items: center;: centra los elementos verticalmente (será detallado más adelante)
9.2 Centrando verticalmente
1. Centrando con Flexbox
Flexbox proporciona una manera sencilla de centrar elementos verticalmente.
Ejemplo:
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #2ecc71;
}
.centered-box {
width: 200px;
height: 100px;
background-color: #3498db;
}
<div class="flex-container">
<div class="centered-box"></div>
</div>
Explicación del código:
align-items: center;: centra los elementos verticalmente
2. Centrando con CSS Grid
CSS Grid ofrece opciones potentes para centrar elementos:
.grid-container {
display: grid;
place-items: center;
height: 100vh;
background-color: #9b59b6;
}
.centered-box {
width: 200px;
height: 100px;
background-color: #3498db;
}
<div class="grid-container">
<div class="centered-box"></div>
</div>
Explicación del código:
display: grid;: establece el contenedor como CSS Gridplace-items: center;: centra elementos horizontal y verticalmente
3. Centrando verticalmente con posicionamiento absoluto y transformación CSS
Usar posicionamiento absoluto y transformación CSS permite centrar elementos verticalmente.
Ejemplo:
.container {
position: relative;
height: 100vh;
background-color: #e74c3c;
}
.centered-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 100px;
background-color: #3498db;
}
<div class="container">
<div class="centered-box"></div>
</div>
Explicación del código:
position: absolute;: ubica el elemento en una posición absoluta en relación al contenedortop: 50%;,left: 50%;: mueve el elemento al 50% desde el borde superior y izquierdo del contenedortransform: translate(-50%, -50%);: traslada el elemento 50% de su ancho y altura para centrarse
4. Centrando verticalmente con tabla y celdas
Usar tabla y celdas para centrar elementos verticalmente.
Ejemplo:
.table-container {
display: table;
width: 100%;
height: 100vh;
background-color: #f39c12;
}
.table-cell {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered-box {
display: inline-block;
background-color: #3498db;
padding: 20px;
color: white;
}
<div class="table-container">
<div class="table-cell">
<div class="centered-box">Elemento centrado</div>
</div>
</div>
Explicación del código:
.table-container: crea un contenedor con displaytable.table-cell: crea una celda de tabla con alineación verticalmiddle
GO TO FULL VERSION