Comment positionner le bouton exactement en CSS

Question

J'ai essayé de créer un site simple comme this . Cependant, je me rends compte maintenant que je suis mauvais en CSS Le positionnement pour le bouton ne s'affiche jamais comme prévu.
Comme vous l'avez peut-être deviné, je veux que le bouton (#play_button) apparaisse exactement sur l'image du bouton de lecture en arrière-plan. Quelqu'un peut-il me dire comment cela doit être fait?

Mon code CSS:

body { 
     background: url('http://oi44.tinypic.com/33tjudk.jpg') no-repeat center center fixed;    
     background-size:cover;  /*For covering full page*/
}

#play_button {
    position:relative;
    transition: .5s ease;
    top: 191px;
    left: 420px;
    right: -420px;
    bottom: -191px;
}
#play_button:hover { 
    -webkit-transform: scale(1.05);/*Grows in size like Angry Birds button*/
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
}

METTRE À JOUR:

Juste une chose de plus, le problème qui se produit est que si je redimensionne la fenêtre du navigateur, l'image se déplace vers une nouvelle position.

METTRE À JOUR:

Problème résolu :) Ici, dans cet exemple , vous pouvez voir comment le bouton reste au centre de la page même si vous redimensionnez la fenêtre du navigateur. Comme toujours, vous pouvez modifier le left et top décalages pour obtenir les résultats souhaités. Voici le code .

Answer 1

Donc, l'astuce ici est d'utiliser le positionnement absolu calc comme ceci:

top: calc(50% - XYpx);
left: calc(50% - XYpx);

où XYpx est la moitié de la taille de votre image, dans mon cas, l'image était un carré. Bien sûr, dans ce cas désormais obsolète, l'image doit également changer sa taille proportionnellement en réponse au redimensionnement de la fenêtre pour pouvoir rester au centre sans regarder hors de proportion.