垂直中心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應在「中心」（FIT-到屏幕）顯示在那裏延伸到瀏覽器的最大寬度和垂直方向中心在頁面的中間。

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

Answer 1

您將需要一些包裝來做垂直對齊。檢查這fiddle。