Centrar horizontal y verticalmente un elemento HTML con CSS

Vamos aprender como centrar vertical y horizontalmente un elemento HTML con la ayuda de CSS. Para eso utilizamos el margin para centrar horizontalmente, y line-height con ayuda de otros hackTricks.

Veamos el resultado visualmente.

Y continuación el código:

El achivo index.html

<!DOCTYPE html>
<html lang=”en”>

<head>
    <meta charset="UTF-8 ">
    <title>Document</title>
    <link rel=”stylesheet” type=”text/css” href=”centrado.css”>
</head>

<body>
    <div>Aprendiendo</div>
</body>

</html>

Ahora el archivo centrado.css

html{
height: 100%;
}

body{
margin: 0;
font-family: arial;
height: 100%
}

div{
width: 200px;
height: 50px;
background-color: green;
line-height: 50px;
color: white;
text-align: center;
margin: auto;
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
}

Y así de simple se obtiene un elemento centrado.

nota

Deja una respuesta