垂直居中 SVG 视图框

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

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

Answer 1

您将需要一些包装器来进行垂直对齐。检查这个fiddle。