
En esta pequeña demostración podemos ver como podemos crear una capa div centrada tanto horizontal como verticalmente y ademas totalmente responsive ya que siempre se mantendrá en el eje central del navegador sea cual sea su resolución o escalado.
Ejemplo en código y a continuación el enlace de la demo:
<style>
.padre {
position: absolute;
z-index: 2;
top: 50%;
width: 100%;
transform: translateY(-50%);
}
.contenido {
max-width: 750px;
display: block;
text-align: center;
margin: 0 auto;
}
h1,
p {
margin: 4px;
}
</style>
<div class="padre">
<div class="contenido">
<h1>Lorem ipsum dolor sit amet, consectetur.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem nostrum numquam ducimus dicta laudantium doloribus. Quia esse odio, voluptas aliquam officia nobis corporis repellat quaerat quam? Est quasi animi, aliquam.</p>
</div>
</div>DemoEditado
2
Puntos
Puntos
1601
Visitas
Visitas
1
Resp
Resp
Por alber hace 7 años
Admin
Respuesta #1
Muchas gracias por la aportacion mister !
2
Puntos
Puntos
Por antoniodesign hace 7 años
Novice