Cuando creamos una página web, lo más probable es que nos hayamos encontrado con el problema de centrar un elemento. Entonces, echemos un vistazo a 4 formas diferentes de centrar un elemento usando CSS:
- Uso de flexión
- Propiedad de margen
- Propiedad de cuadrícula
- Propiedad absoluta
Ahora echemos un vistazo a cómo funcionan estas propiedades respectivas usando el ejemplo.
Código HTML:
Nombre de archivo: index.html
HTML
<!DOCTYPE html> <html> <head> <title>Page Title</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <div class="parent"> <div class="child"> This element is centered </div> </div> </body> </html>
En el código anterior, hemos creado un div principal y un div secundario. Veremos cómo centrar el div secundario dentro del div principal. Se ha vinculado una hoja de estilo titulada styles.css al archivo donde hemos definido los estilos del div principal y secundario.
Nombre de archivo: estilos.css
CSS
.parent {
height: 400px;
width: 400px;
background-color: red;
}
.child {
height: 100px;
width: 100px;
background-color: blue;
}
Método 1: Usar Flex Podemos usar Flexbox para centrar el elemento. Podemos establecer la propiedad de visualización del div principal como flex y podemos centrar fácilmente el div secundario usando las propiedades de justificar el contexto: centrar (horizontalmente) y alinear elementos: centrar (verticalmente) .
CSS
.parent {
display: flex;
justify-content: center;
align-items: center;
}
Método 2: propiedad de margen Otra forma sencilla de centrar un div secundario es establecer su margen en automático y hacer que el div principal se muestre como una cuadrícula.
CSS
.parent {
display: grid;
}
.child {
margin: auto;
}
Método 3: propiedad de la cuadrícula Una manera bastante fácil de centrar elementos es usar la propiedad de la cuadrícula en el div principal y establecer los elementos de lugar: centro .
CSS
.parent {
display: grid;
place-items: center;
}
Método 4: Propiedad Absoluta También podemos usar la propiedad de posición para centrar los elementos.
CSS
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Producción:
La salida de todas estas formas será la misma que se muestra a continuación:
