垂直中心SGV視圖框

我試圖通過CSS一個DIV中垂直對齊SGV視圖框，但我一直沒有。我只能通過width='100%'屬性將它橫向居中。應用一些CSS技巧來垂直對齊也失敗了。我真的不知道如何解決這個問題。垂直中心SGV視圖框

代碼示例：

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

來源

2017-07-10 theflarenet

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

來源

2017-07-10 04:46:22

這是一個邊緣[僅鏈接應答]（// meta.stackexchange.com/q/8231）。你應該擴大你的答案，在這裏包含儘可能多的信息，並使用鏈接僅供參考。 –

垂直中心SGV視圖框

回答

相關問題