javascript - 垂直居中SVG View 框

我试图通过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应该在“中心”（适合屏幕显示）显示中，伸展到浏览器的最大宽度，并在页面中间垂直居中。

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

最佳答案

您将需要一些包装器以进行垂直对齐。选中此fiddle。