css - Center SVG, preserveAspectRatio not working

Question

I want my SVG to be centered but it looks like this:

I'm trying to do preserveAspectRatio="xMidYMid meet" to center it, but I'm obviously doing something wrong.

My tree and styling looks like this:

Can anyone see what I'm doing wrong?

标签： csssvg

Answer 1

默认情况下，svg 是内联的，将这些行添加到 .triangle 类以使其居中：

display: block;
margin: 0 auto;

这将使其水平居中，如果您想要垂直，请按照以下步骤操作 ->

将这些行添加到 .triangle 类：

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

将此行添加到您的 .icon_icon_3iAWn 类：

position: relative;