title: Aligning SVG elements to appear center vertically and horizontally
body: <p>I have an SVG element which will be reused and will be of different size. As of now, I have to adjust viewbox manually to make it appear centre. Is there is any svg solution to centre irrespective of any size.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg width="200" height="200" viewbox="0 0 100 100" preserveAspectRatio="xMidYMid" fill="#000"&gt;
    &lt;use xlink:href="#home"&gt;&lt;/use&gt;
  &lt;/svg&gt;
  
  &lt;svg width="200" height="200" viewbox="0 0 200 200"&gt;
    &lt;use xlink:href="#home"&gt;&lt;/use&gt;
  &lt;/svg&gt;
  
  &lt;svg style="display:none"&gt;
    &lt;symbol id="home"&gt;
      &lt;path d="M12.3469758,5.06253201 L14.1823758,6.54832612 C14.2573758,6.61066436 14.3735758,6.64123789 14.4641758,6.64123789 C14.5781758,6.64123789 14.7043758,6.59299524 14.7833758,6.49928936 C14.9253758,6.33113495 14.9095758,6.08078936 14.7401758,5.94003201 L7.71597578,0.0913555356 C7.64157578,0.0294143591 7.55297578,0.000826123823 7.46277578,0.000230535587 C7.45637578,-0.000365052648 7.45037578,0.000429064999 7.44397578,3.20061754e-05 C7.43757578,0.000429064999 7.43137578,-0.000365052648 7.42497578,0.000230535587 C7.33477578,0.000826123823 7.24477578,0.0294143591 7.17037578,0.0913555356 L0.142975778,5.94003201 C-0.0262242219,6.08078936 -0.0484242219,6.33133348 0.0933757781,6.49928936 C0.172575778,6.59299524 0.285975778,6.64123789 0.400175778,6.64123789 C0.490975778,6.64123789 0.531975778,6.61086289 0.606975778,6.54832612 L1.94677578,5.39169377 L1.94677578,11.6271055 C1.94677578,12.4944805 2.85697578,13.2087894 3.74657578,13.2087894 L10.9465758,13.2087894 C11.7877758,13.2087894 12.3467758,12.5564217 12.3467758,11.6271055 L12.3469758,5.06253201 Z M10.9467758,12.4146717 L9.54697578,12.4146717 L4.94697578,12.4146717 L3.74677578,12.4146717 C3.30097578,12.4146717 2.74697578,12.0547379 2.74697578,11.6271055 L2.74697578,4.74766436 C2.74697578,4.74091436 2.79537578,4.73436289 2.79497578,4.72741436 L7.41997578,0.899370241 L11.6883758,4.48302465 C11.6245758,4.55330406 11.5471758,4.64542171 11.5471758,4.74766436 L11.5469758,11.6271055 C11.5469758,12.0513629 11.3849758,12.4146717 10.9467758,12.4146717 Z" id="Shape" fill-rule="nonzero"&gt;&lt;/path&gt;
      &lt;path d="M8.25,7.5 L6,7.5 L6,12.75 L5.25,12.75 L5.25,7.125 C5.25,6.91789322 5.41789322,6.75 5.625,6.75 L6,6.75 L8.625,6.75 C8.83210678,6.75 9,6.91789322 9,7.125 L9,7.5 L9,7.875 C9,8.08210678 8.83210678,8.25 8.625,8.25 C8.41789322,8.25 8.25,8.08210678 8.25,7.875 L8.25,7.5 Z M8.625,9 C8.83210678,9 9,9.16789322 9,9.375 L9,12.375 C9,12.5821068 8.83210678,12.75 8.625,12.75 C8.41789322,12.75 8.25,12.5821068 8.25,12.375 L8.25,9.375 C8.25,9.16789322 8.41789322,9 8.625,9 Z" id="Combined-Shape"&gt;&lt;/path&gt;
    &lt;/symbol&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Also refer the <a href="https://jsfiddle.net/zskmh70w/" rel="nofollow noreferrer">fiddle</a></p>