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:

index.html

[code language=»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>
[/code]

centrado.css

[code language=»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;
}
[/code]

Y así de simple se obtiene un elemento centrado.