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

Para colocar una imagen exactamente en el centro de una página lo puedes lograr mediante CSS de la siguiente forma.

Supongamos que nuestra imagen mide 300px de ancho por 200px de alto.

HTML


<img id="logo" src="img/logo.png" /> 

CSS


#logo{
position:fixed;
width:300px;
height:200px;
left:50%;
top:50%;
margin-left:-150px;
margin-top:-100px;
}

Fuentes:
http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/ 

En el diseño de páginas web es muy útil colocar bloques o contenedores para indicar el lugar que va a ocupar un elemento de nuestro diseño. Y es mucho más práctico el poder remplazar dicho bloque desde nuestra hoja de estilos. De esta forma podemos modificar el diseño sin tener que cambiar la estructura o el código html de nuestra página.

En ésta página nos muestran nueve formas diferente de realizar esto. Pero mi favorita es, sin duda, la técnica número 3.

HTML


<h1 class="technique-three">

CSS-Tricks

</h1>

CSS


h1.technique-three {

width: 350px; height: 75px;

background: url("images/header-image.jpg");

text-indent: -9999px;

}

Existen diversas familias de fuentes que puedes escoger para un texto. Hay algunas que cuentan con variantes de tipo ‘bold’ como ‘Arial’ y su respectiva ‘Arial Black’. Pero ¿cómo hacemos para engrosar un texto que de una familia de fuente que no tiene esta variante?

Existen varias soluciones, como duplicar el texto en una capa y moverla un poco a la derecha o izquierda. Yo prefiero convertir el texto en un trazo (path) y luego trazarla con alguna herramienta de dibujo. Para hacer esto, primero selecciona el texto que quieres engrosar y da clic en ‘Path from Text’

Luego ve a la pestaña de trazos y selecciona el trazo que se generó. Da clic en ‘stroke path’ y selecciona la herramienta de dibujo que prefieras.

     

Fuentes:
http://wahmaholic.com/2009/05/how-to-make-fonts-bold-in-gimp/