En este artículo, aprenderemos a centrar un elemento div HTML usando la propiedad flexbox de CSS.
Consulte este artículo para obtener más información sobre flexbox.
Enfoque: Para centrar el elemento <div> horizontalmente usando flexbox.
- Usamos la propiedad del conjunto de pantalla para flex, es decir, display: flex;
- Alinee los elementos al centro usando align-items: center;
- El último paso es establecer el contenido de la justificación en el centro , es decir, el contenido de la justificación: el centro;
Ejemplo 1: El siguiente ejemplo usa la propiedad flex .
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.center {
display: flex;
justify-content: center;
color: green;
}
</style>
</head>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<div class='center'>
This text is centered
</div>
</body>
</html>
Producción:
Ejemplo 2: si queremos centrar el <div> horizontal y verticalmente, simplemente agregamos height: 500px; en la parte CSS del código.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.center {
display: flex;
justify-content: center;
align-items: center;
height: 500px;
}
</style>
</head>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<div class="center">
This text is centered
</div>
</body>
</html>
Producción:
