Centrar el elemento HTML en la pantalla con CSS puro
| Autor: | tripu |
|---|---|
| Views Total: | 3,317 |
| Sitio oficial: | Ir a la web |
| Actualizado: | June 4, 2014 |
| Licencia: | Unknown |
Vista prévia
Descripción
Un fragmento de CSS/CSS3 fácil de centrar cualquier elemento HTML horizontal y verticalmente en la pantalla del navegador.
Funcionamiento
Envuelve los elementos HTML que desees centrar en la pantalla.
<div class="container"> <div class="content"> <h1>Resize the window to see it in action.</h1> ... </div> </div>
Las reglas CSS/CSS3.
body {
margin: 0;
border: 0;
padding: 0;
background-color: #404040;
color: #f0f0f0;
}
div.container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
div.content {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
}
h1 {
margin-top: 0;
}
