How can I centre the sitemap SVG I made with html? I want to get it in in the middle of the page
<svg id="svgJS" height="500" width="180">
<g id="groupId1">
<rect x="15" y="130" height="50" width="150"
stroke="purple" fill="none" stroke-width="2" />
<text fill="#000" font-size="14" x="90" y="160"
font-family="Arial" text-anchor="middle">
Home Page</text>
</g>
<g id="groupId2" >
<line id="shapeId2" stroke="purple" stroke-width="2"
x1="90" y1="180" x2="90" y2="230"></line>
<polyline points="95, 220 90, 230 85, 220"
stroke="purple" stroke-width="2" fill="none" />
</g>Use flexbox, and then justify, and align the content.
body { display: flex; justify-content: center; align-items: center; }<svg id="svgJS" height="500" width="180">
<g id="groupId1">
<rect x="15" y="130" height="50" width="150"
stroke="purple" fill="none" stroke-width="2" />
<text fill="#000" font-size="14" x="90" y="160"
font-family="Arial" text-anchor="middle">
Home Page</text>
</g>
<g id="groupId2" >
<line id="shapeId2" stroke="purple" stroke-width="2"
x1="90" y1="180" x2="90" y2="230"></line>
<polyline points="95, 220 90, 230 85, 220"
stroke="purple" stroke-width="2" fill="none" />
</g>
</svg>