Como ya sabemos, flexbox es un modelo y no solo una propiedad de CSS.
La siguiente imagen muestra un cuadro con dos ejes, uno es el Eje principal (es decir, el eje horizontal) y el Eje transversal (es decir, el eje vertical). Y para alinear un flexbox en el centro, tanto horizontal como verticalmente, vamos a necesitar trabajar en ambos ejes.
Entonces, antes que nada, debemos recordar dos propiedades CSS aquí, y son:
- justificar-contenido
- alinear elementos
La primera propiedad, es decir, justificar el contenido, es alinear cualquier elemento HTML en el eje principal, que es el eje horizontal. Y la segunda propiedad es alinear cualquier elemento HTML en un eje transversal, que es el eje vertical.
Entonces, para alinear un elemento HTML en el centro de la pantalla, tanto horizontal como verticalmente, tendremos que establecer el valor de ambas propiedades en ‘centro’.
Sintaxis:
.gfg-box {
display: flex;
justify-content: center;
align-items: center;
}
Ejemplo:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox</title>
<style>
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
.gfg-box {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.box {
padding: 8px 35px;
font-size: 30px;
color: green;
border: 10px solid green;
}
</style>
</head>
<body>
<div class="gfg-box">
<div class="box">
<h1>GeeksforGeeks</h1>
</div>
</div>
</body>
</html>
Producción:
Nota: La propiedad ‘height’ debe tener el valor ‘100%’ en ‘HTML’ , ‘body’ y ‘gfg-box’ .
Para saber más sobre flexbox y todas sus propiedades, consulta este artículo .
Publicación traducida automáticamente
Artículo escrito por aakashpawar1999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA