Hola saludos, este es mi tutorial de como centrar un div, ya sea horizontalmente o verticalmente
- Creamos un archivo html en mi caso uso visual studio code, este brinda atajo de teclado o comando" html5 " para crear un árbol html básico.
- Añadimos el div correspondiente y le asignamos una clase o claseName = " . " o un id = " # "
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset="“UTF-8”">
<meta http-equiv="“X-UA-Compatible”" content="“IE=edge”">
<meta name="“viewport”" content="“width=device-width," initial-scale=“1.0””>
<title>Centrar div</title>
<link rel=“stylesheet” src=“style.css”>
</head>
<body>
<div class=“divCentrado” id=“divCentrado”>
Area a Mover
</div>
</body>
</html>
- Creamos un archivo style.css y muy importante crear la conexión en la etiqueta head del html “<link rel=“stylesheet” src=“style.css”>”
- En este caso utilizare flex para centrar el div. Para utilizar las propiedades de flexbox es necesario el contenedor (div) y declararle la propiedad “display: flex”. Para centrar horizontal y verticalmente el contenido utilizaremos las propiedades “justify-content: center” y “align-items:center”.
