Bienvenido a datoweb.com!! En este foro podrás encontrar ayuda sobre diseño y desarrollo web en general. Si quieres formar parte de esta comunidad para pedir ayuda o colaborar ayudando a otros usuarios del foro solo tienes que registrarte desde el siguiente enlace: Registrarse en el Foro

Como crear una capa div centrada verticalmente

div-centrada-vertical
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>
Demo
Editado
2
Puntos
283
Visitas
1
Resp
Por alber hace 4 meses
Administrador
Respuesta #1
Muchas gracias por la aportacion mister !
2
Puntos
Por Antonio Design hace 3 meses
Principiante
Compartir en facebook
Compartir en twitter
Compartir
Para comentar Inicia sesión o Registrate