css

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

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

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

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

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

谢谢，

最佳答案

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

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

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

绝对

和CSS:

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

flexbox

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

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

和CSS:

旧答案:

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

或者放在div里

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

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

关于css - 垂直居中的 SVG 标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14315331/