html如何居中svg,垂直居中SVG标签

Maciej Papro..

19

我更新了这个答案,因为当前的浏览器有更好的解决方案.

多么聪明的人说,第一年你学习HTML和CSS,再过几年你学习高级的javascript,五年后你终于学会了如何垂直居中div.

垂直/水平对齐css中的任何内容都可以使用它.

Whatever

和css:

.outside{

position:relative;

}

.inside{

position:absolute;

top:50%;

bottom:50%;

transform:translate(-50%, -50%);

}

唯一的问题是元素不会产生高度.

老答案:

你有高度和宽度,所以你可以使用 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)