垂直センターSGVビューボックス

Question

CSSを介してDIV内のSGVビューボックスを垂直に整列しようとしていますが、失敗しています。私はwidth='100%'属性によって水平方向にのみセンタリングすることができます。縦方向に整列させるためにいくつかのCSSトリックを適用することも失敗しました。私は本当にこれにどのように取り組むべきか分かりません。

コード例：

<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> 

viewBox=""のため、私が持っている寸法は完璧ではありません。私はこの方法を避けることができる代替案を見つけて、SGVを自動的に伸ばしたいと思っています。

SGVが伸びているとき、SGVはブラウザの最大幅まで伸び、ページの真ん中に垂直に配置された「中央」（画面にフィット）表示にする必要があります。

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

Answer 1

このような縦書きを行うには、いくつかのラッパーが必要です。これをチェックしてくださいfiddle。