CSS – Centrar un div horizontalmente y verticalmente

marzo 4, 2013

Necesitaba desplegar un mensaje sencillo con un texto centrado en la pantalla y una imágen alineada a la parte inferior izquierda de la pantalla.

Para lograr esto lo hice de la siguiente manera.

HTML

</p><div class="message">        Ahora puedes ver mensajes importantes en esta pantalla.

        Selecciona la opción de "No mostrar este mensaje de nuevo" y haz clic en el botón OK si has entendido el mensaje    </div><div class="indicador">Selecciona y da clic aquí</div><p>

CSS

    .message {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 640px;
        height: 120px;
        margin-left: -320px;
        margin-top: -60px;
        font-size: 24px;
        color: gray;
        opacity: 0.4;
    }
    .indicador {
        text-indent: -800px;
        background-image: url(../img/mensajes/dismiss-arrow.png);
        width: 468px;
        height: 60px;
        left: 20px;
        bottom: 10px;
        position: absolute;
    }

Hay que resaltar que para centrar el div necesitamos que tenga un tamaño fijo (width y height)y una posición absoluta, lo colocamos en el centro de la pantalla (la esquina superior izquierda del elemento) con top y left en 50% y luego utilizamos un valor proporcional negativo para margin-left y margin-top respectivamente para que se muestre centrado.

Fuentes:
http://stackoverflow.com/questions/9862167/positioning-div-element-at-center-of-screen

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: