Quelle est la meilleure façon de centrer horizontalement et verticalement le jeu SVG au milieu?

Question

Je sais qu'il y a un tas de façons différentes de le faire, je suis à la recherche de la meilleure et la plus simple façon d'y parvenir. Tout ce que je recherche est le moyen le plus fiable de centrer horizontalement et verticalement le svg de jeu au milieu.

Toute aide qui serait grandement appréciée.

On m'a donné ce code, mais je ne sais pas comment l'utiliser.

Quelqu'un peut-il me montrer s'il vous plaît?

.parent { 
    position: relative; 
} 

.child { 
    width: 300px; 
    height: 100px; 
    padding: 20px; 

    position: absolute; 
    top: 50%; 
    left: 50%; 

    margin: -70px 0 0 -170px; 
} 

https://jsfiddle.net/zLtk9n4p/

<div id="playButton2" style="display:block; width: 266px; height: 266px; cursor: pointer;background-color: #000000 ;background-image: linear-gradient(to right,transparent 83px,#0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px); border: 3px solid #0059dd;" 

onclick=" 
     var button = document.getElementById('playButton2'); 
     var player = document.getElementById('player2'); 
      document.querySelector('#playButton2 .initial').style.display='none'; 
      document.querySelector('#playButton2 .speaker').style.display='none'; 
      document.querySelector('#playButton2 .play').style.display='none'; 
     player.volume=1.0; if (player.paused) { 
     playButton2.style.border='3px solid #e77d19'; 
     playButton2.style.background = 'linear-gradient(to right,transparent 83px,#e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px), url(\'http://via.placeholder.com/260x260\')'; 
     playButton2.style.backgroundColor = 'transparent'; 
     playButton2.style.backgroundRepeat = 'no-repeat'; 
     playButton2.style.backgroundPosition = 'center'; 
     document.querySelector('#playButton2 .pause').style.display='inline-block'; 
     document.querySelector('#playButton2 .play').style.display='none'; 
     player.play(); 
     } else { 
     playButton2.style.border='3px solid #e77d19'; 
     playButton2.style.background = 'linear-gradient(to right,transparent 83px,#e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px), url(\'http://via.placeholder.com/260x260\')'; 
     playButton2.style.backgroundColor = 'transparent';  
     playButton2.style.backgroundRepeat = 'no-repeat'; 
     playButton2.style.backgroundPosition = 'center'; 
     document.querySelector('#playButton2 .pause').style.display='none'; 
     document.querySelector('#playButton2 .play').style.display='inline-block'; 
     player.pause(); 
     }"onmouseover=" 
var player = document.getElementById('player2'); 
player.isPlaying = function() { 
    return player.paused === false; 
} 
if (player.isPlaying()) { 
    document.querySelector('#playButton2 .speaker').style.display='none'; 
    document.querySelector('#playButton2 .pause').style.display='inline-block'; 
}" 

onmouseout=" 
var player = document.getElementById('player2'); 
player.isPlaying = function() { 
    return player.paused === false; 
} 
if (player.isPlaying()) { 
    document.querySelector('#playButton2 .pause').style.display='none'; 
    document.querySelector('#playButton2 .speaker').style.display='inline-block'; 
}"> 

    <svg class="initial" width="90" height="108" viewbox="0 -10 85 120"> 
    <path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:black; " d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path> 
    </svg> 

    <svg class="pause" style="display: none;" width="90" height="108" viewbox="-13 -10 85 120"> 
    <path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:transparent;" d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path> 
    </svg> 

    <svg class="speaker" style="display: none;" width="60" height="72" viewbox="0 0 16 14"> 
    <path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z" 
    fill="#1ed760 " fill-rule="evenodd"></path> 
    </svg> 

    <svg class="play" style="display: none;" width="90" height="108" viewbox="0 -10 85 120"> 
    <path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:transparent; " d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path> 
    </svg> 


</div> 

<audio id="player2" style="display:none;"> 
    <source src='' type='audio/mpeg'></source> 
</audio> 

Answer 1

La façon la plus simple serait d'utiliser la boîte flex. Changer la propriété d'affichage du bouton pour fléchir

<div id="playButton2" style="display:flex; ... 

et donner la marge initiale svg: auto

<svg class="initial" style="margin: auto" ... 

Il alignera maintenant au centre. Mais notez que la boîte flexible est complètement différente pour créer une marque et que vous pourriez rencontrer un comportement inattendu lorsque vous utilisez la boîte flexible au lieu du bloc d'affichage, mais pour l'alignement vertical, la boîte flexible est certainement la plus fiable.

Answer 2

Utilisez ces styles:

#playButton2 { 
    position: relative; 
} 

div#playButton2 > svg { 
    position:absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
}