¿Cómo puedo centrar el mapa del sitio SVG que hice con html? Quiero ponerlo en el medio de la página.
<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 y luego justifique y alinee el contenido.
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>