垂直中心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视图框

回答

相关问题