how to get the svg in the center of the page( according to the width) without changing the value?

Question

https://code.sololearn.com/WhJEXpF9L0X1/?ref=app ( not mine)
lets say i want to add this in middle. but i have to change a whole a lot of values for that. is there a shortcut way to do that?

Answer 1

Put your SVG in a div and center the div.

Make sure your svg element has width specified. The viewBox attribute might help too.

If you give your div a width equal to the width of the svg, you can set the div's margin-left and margin-right to auto to get it centered.
Another option is something like this:
div {
position: absolute;
top: 0;
left: 50%;
margin-left: -350px; /* -(half of the constant width) */
}

I centered SVG's in the page at:
https://code.sololearn.com/Wru16704cmAO