I am trying to center my SVG in the middle but its not working i have tried changing width , height and translate properties but it does not seems to affect the output,the path inside svg does not seem to take any affect from the above mentioned parameters,here is my code. To SVG is in the bottom right corner (open full screen view)
.page {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
background-color: #2C3A47;
}
#demo-svg{
overflow: visible;
display: flex;
align-items: center;
justify-content: center;
}
#demo-svg path{
stroke-dasharray: 1000;
stroke-dashoffset: 0;
}
.svg-cont{
width: 200;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div className="page">
<svg id="demo-svg" width="100%" height="100%">
<path stroke="#25CCF7" strokeWidth="3" fill="none"
d="M970.374,716.862a57.3,57.3,0,0,0-22.339-22.613q-5.313-2.928-5.31-4.029t5.31-4.577q10.437-6.957,17.761-20.6t7.325-26.275q0-36.621-27.832-54.017Q922.4,570.47,883.948,570.469q-16.479,0-49.255-.183t-49.072-.183q-4.579,0-4.578,4.028,0,21.243,1.923,63.813t1.922,63.812q0,20.145-1.922,60.516t-1.923,60.517q0,4.213,4.578,4.211,8.6,0,25.909-.732t25.909-.733q11.717,0,35.248.549t35.248,0.55q31.311,0,51.636-23.987Q978.8,779.76,978.8,747.9A62.337,62.337,0,0,0,970.374,716.862ZM868.567,675.206q-41.382,0-41.381-5.31,0-4.395-.184-13.184t-0.183-13q0-6.222.55-18.31t0.549-18.128q0-4.573,30.762-4.577,31.676,0,45.593,5.31,23.071,8.973,23.071,34.79,0,32.409-58.777,32.41h0Zm47.058,107.116q-12.633,7.51-41.564,7.508-23.072,0-34.79-.916t-11.719-2.747q0-6.771-.366-20.324T826.819,745.7V715.672q0-4.944,46.143-4.944,26.732,0,39.368,5.127,19.954,7.875,19.958,30.212,0,26.368-16.663,36.255h0Zm134.305-190.8a27.735,27.735,0,0,0-35.24-.183,20.817,20.817,0,0,0-7.88,16.663q0,22.522,25.45,22.522,25.1,0,25.09-22.522A20.779,20.779,0,0,0,1049.93,591.526Zm3.02,62.622a85.843,85.843,0,0,0-10.34.916,58.938,58.938,0,0,1-20.69,0,85.747,85.747,0,0,0-10.16-.916q-3.855,0-3.85,3.113,0,14.283,2.11,42.847t2.1,42.847q0,12.817-.64,38.177t-0.64,37.994q0,7.511,3.85,7.508h35.7q3.3,0,3.3-3.845,0-13.183-.55-39.826t-0.55-40.008q0-14.283,1.74-42.756t1.74-42.572q0-3.476-3.12-3.479h0Zm82.59-84.045q-3.3,0-10.08.549t-10.25.55c-2.2,0-5.49-.183-9.89-0.55s-7.69-.549-9.88-0.549q-3.855,0-3.85,3.662,0,19.6,1.92,59.235t1.93,59.417q0,21.793-.37,65.278t-0.37,65.094q0,4.213,3.3,4.211h34.97q2.925,0,2.93-4.211,0-21.6-.73-65.094t-0.73-65.278q0-48.888,4.02-117l0.19-2.38q0.18-2.928-3.11-2.93h0Zm202.33,85.327q-13.56-2.746-18.5-2.746-3.105,0-5.12,11.535c-1.35,7.691-2.38,11.536-3.12,11.536a1.6,1.6,0,0,1-1.1-.549q-6.585-6.957-9.7-10.621-20.88-19.406-48.89-19.409-39.735,0-64.09,27.649-23.25,26.551-23.25,67.2,0,36.075,23.07,63.171,24.345,28.385,59.88,28.382a63.6,63.6,0,0,0,28.93-7.325,108.316,108.316,0,0,0,20.14-13.366q8.79-7.141,9.89-7.141,1.635,0,3.48,12.817,1.815,12.819,5.31,12.817a143.461,143.461,0,0,0,15.1-1.19,143.216,143.216,0,0,1,15.2-1.19c3.36,0,4.97-1.768,4.85-5.31l-0.18-2.564q-4.575-80.379-4.58-82.214,0-30.393,7.14-72.327a20.862,20.862,0,0,0,.55-3.3q0-2.562-15.01-5.86h0Zm-45.23,120.484q-14.46,17.4-35.89,17.395-21.975,0-36.62-17.029-14.1-16.3-14.1-38.452,0-22.338,14.1-38.819,14.64-17.208,36.62-17.212t36.07,17.395q13.365,16.116,13.37,38.636a57.772,57.772,0,0,1-13.55,38.086h0ZM1425.94,570.1q-3.3,0-10.07.549t-10.25.55q-3.3,0-9.89-.55c-4.4-.366-7.69-0.549-9.89-0.549q-3.84,0-3.84,3.662,0,19.6,1.92,59.235t1.92,59.417q0,21.793-.37,65.278t-0.36,65.094q0,4.213,3.29,4.211h34.98q2.925,0,2.93-4.211,0-21.6-.74-65.094t-0.73-65.278q0-48.888,4.03-117l0.18-2.38c0.12-1.952-.91-2.93-3.11-2.93h0Z" />
</svg>
</div>
</body>
</html>