垂直中心SGV视图框

Question

我正试图通过CSS在DIV中垂直对齐SGV View Box，但我一直在失败。我只能通过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应该处于“中心”（适合屏幕）显示，其中它延伸到浏览器的最大宽度并垂直居中在页面中间。

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

Answer 1

你需要一些包装来做垂直对齐。请检查此fiddle。