Verticalement Centre SGV View Box

Question

J'essaie d'aligner verticalement une vue SGV View Box dans un DIV via CSS, mais je continue à échouer. Je suis seulement capable de le centrer horizontalement par l'attribut width='100%'. L'application de quelques astuces CSS pour l'aligner verticalement a également échoué. Je n'ai vraiment aucune idée de comment aborder cela.

Exemple de code:

<div class="sgvContainer" id="sgvTest" style="opacity: 0;"> 
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMinYMin slice" viewBox="0 0 358.98 700.6" width="100%"> 
     <path d="M0,122.7h300 " /> 
    </svg> 
</div> 

Les dimensions que j'ai pour viewBox="" ne sont pas parfaits. J'aimerais trouver des alternatives où je peux éviter cette méthode afin qu'elle s'étende automatiquement au SGV.

Lorsqu'il s'étire, le SGV doit se trouver dans un affichage «central» (ajustement à l'écran) où il s'étire jusqu'à la largeur maximale du navigateur et se centre verticalement au milieu de la page.

----------------- 
|    | // Potentially empty space at the top 
| ======== | 
|===============| // = would be any SGV 
| ======== | 
|    | // Potentially empty space at the bottom 
----------------- 

Answer 1

Vous aurez besoin d'un peu de papier pour l'aligner verticalement. Cochez cette case fiddle.