Hola a todos, en siguiente tutorial voy a estar explicando un método fácil y efectivo para centrar elementos en nuestros websites.
Para este ejemplo voy a utilizar imágenes ya que me parece la manera más didáctica de hacerlo.
Bien, ahora vamos con el código!
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Center Element</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="padre">
<div id="hijo"></div>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
}
body, html{
background: #fff;
font-size: 16px;
color: #000;
font-family: monospace;
width: 100%;
height: 100%;
}
#padre{
position: relative;
width: 100%;
height: 100%; /*height: 100vh; en caso de quitarle el height al body*/
background: #ff3636;
}
#hijo{
position: absolute;
width: 230px;
height: 170px;
background: #3effe3;
left: 50%;
top: 50%;
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
A tener en cuenta:
Noten que al body le asigné “height: 100%”, esto porque el padre inmediato de “#padre” es el body. Para que "#
padre" ocupe todo el alto de la pantalla su padre (body) tiene que tener un “height: 100%”.
En el caso que no quieran quitar “height: 100%” al body van a tener que asignarle a “#padre” un “height: 100vh”.
Espero que les sirva y aguardo sus comentarios.
Saludos!
Leandro Videla
Curso de Desarrollo Web Online 2016
COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE
0 Comentarios
para escribir tu comentario
