css - 垂直居中的 SVG 标签

Question

我正在尝试找出一种使我的 SVG 标签垂直居中的方法。

基本上，这是我试图居中的简化 SVG 代码:

<svg height="272" style="background-color:transparent;margin-left: auto; margin-right: auto;" width="130" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g style="font-size: 0.7em;" transform="scale(1 1) rotate(0) translate(0 270)">
        <g id="1" style="font-size: 0.7em;">
            <image height="32" width="32" x="49" xlink:href="../../images/JOB.GIF" y="-270"/>
        </g>
    </g>
</svg> 

我可以毫不费力地将它放在页面的中间(水平方向)，但我也希望它垂直居中。

我可以添加包装器，但我想知道执行此操作的通用方法，而不取决于 SVG 大小或窗口大小。

我尝试了多种方法，但没有任何效果。

谢谢，

Answer 1

我更新了这个答案，因为当前的浏览器对此有更好的解决方案。

聪明人怎么说，第一年学html和css，再学几年高级javascript，五年后终于学会垂直居中div。

要垂直/水平对齐 css 中的任何内容，您可以使用两种主要方式:

绝对

<div class="outside">
    <div class="inside">Whatever</div>
</div>

和CSS:

.outside{
    position:relative;
}
.inside{
    position:absolute;
    top:50%;
    bottom:50%;
    transform:translate(-50%, -50%);
}

唯一的问题是元素不会生成高度。

flexbox

Flexbox 现在有很好的支持所以为什么不使用它。 https://caniuse.com/#feat=flexbox

使用 flexbox 你的元素不需要是绝对的，所以它会生成高度。代码:

<div class="outside">
    <div>Whatever</div>
</div>

和CSS:

.outside{
    display: flex;
    align-items: center;
    justify-content: center;
}

旧答案:

你有高度和宽度，所以你可以使用 margin : auto auto;

或者放在div里

position:absolute ;
left:50% ;
margin-left: -(half of width of image)px;
top:50% ;
margin-top: -(half of height of image)px;

如果你用它做一些事情(javascript 动画或其他东西)，第二个会更好

我没有检查过，但也许你也可以对 svg 使用第二个选项(没有外部 div)