Centrar contenido e imagen de fondo con css

Hace un tiempo trabajé en un proyecto en el que se necesitaba centrar en vertical y horizontal un pequeño cuadrado y que se viera más o menos igual en todas las resoluciones. También existía una imagen de un fondo con una especie de línea horizontal que debía pasar justo por debajo del cuadradito.

Ni que decir tiene que según la resolución de pantalla ambos elementos se desconfiguraban y opté en su día por "apañarlo" a la resolución más demandada. En este caso la de 1024x768 píxeles.

Estos días trabajando en otro proyecto he tenido la suerte de unir mi experiencia con algo que leí en insomnia.
Aquí se describe como centrar horizontalmente y verticalmente el contenido de un div. en mi caso lo he resuelto así:

body{
background-image:url(images/background.gif);
background-color:#000000;
background-position: center;
background-attachment: fixed;
background-repeat:repeat-x;
overflow:auto;
}

.centrado {
position: absolute;
top: 50%;
left: 50%;
margin-top: -204px; /*Restamos la mitad de alto*/
margin-left: -350px; /*Restamos la mitad de ancho*/
}

Manipulando la imagen adecuadamente se consigue que tanto el contenido como la imagen de fondo estén perfectamente centradas para cualquier tipo de resolución.

La clase .centrado se aplica sobre un div. Para este caso, se trataba de la portada de la web y sólo era necesario este div y su contenido...