Edito y aclaro: Comencé a redactar esta respuesta y a ver el código antes del último comentario de
Klafhor
Qué afán de comenzar la casa por la ventana.
Comience por los tutoriales sobre css y html de
www.librosweb.es y tendrá una buena base. En serio. Sin unos conocimientos mínimos previos es como pretender llevar un f1 sin haber aprendido a conducir.
Sobre el tema:
El código que le indica DragonX en #15 sí centra su #apDiv1. Sólo tiene que ponerle un borde y quitar la imagen.
Lo que ocurre y no se ha dado cuenta es que:
Ese div sólo mide 140px de ancho.
Fuera de él tiene una imagen mucho mayor posicionada de forma absoluta en 0,0.
Esa imagen se coloca sobre (eje z) su #apDiv1 porque:
-Aparece después en el flujo del documento.
- Aunque #apDiv1 tiene declarado |z-index:1| le falta posicionarlo para que esa propiedad actúe. Así que añada |position: relative|
Pero le reitero mi consejo inicial. Antes de seguir y aprovechando que lo que tiene hasta ahora es poco, léase esos manuales que le indico.