Align Svg to Center of Screen

Align svg to center of screen

Try CSS:

#svgMain {margin-left:auto; margin-right:auto; display:block;}

How do I center an SVG in a div?

SVG is inline by default.

Add display: block to it and then margin: auto will work as expected.

Or depending on your layout you may want to keep SVG inline and set text-align: center on a parent element instead.

As another alternative, you can center SVG using flex or grid layouts on the parent element.

How to position my svg image to the center of browser

I think this is what you want?
The SVG will be position in the center even the browser resized and scroll

ON GLOBAL CSS

CSS:

#container {
top: 50%;
left: 50%;
position: fixed;
transform: translate(-50%, -50%);
}

INSIDE SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 439.29 439.29" width="100%" height="100%">    <g id="group">      <circle cx="219.64" cy="219.64" r="219.64" style="fill: #ffb721" id="path"/>      <circle cx="219.64" cy="219.64" r="108.32" style="fill: #f71c17" id="path2"/>    </g>  </svg>

How to align Center to Svg icon

align-items: center will align all children vertically centered.

justify-content:center aligns all children horizontally centered.

body {
  font-size: 5em;
  font-family: 'Segoe UI', sans-serif;
}

svg {
  height: 1em;
  /* optional: additional vertical offset */
  transform: translateY(1%);
}

.parent {
  display: flex;
  align-items: center;
  justify-content: center;
}

span {
  margin-right: 10px
}

<div class="parent">
  <span>
    Example text
  </span>
  <svg class="icon icon-home" id="icon-home" viewBox="0 0 34 48">
    <path d="M33.16,28.12h-5.2v13h-3.44v-16.72l-7.72-8.72l-7.72,8.72v16.72h-3.44v-13h-5.24l16.4-17.4Z"></path>
  </svg>
</div>

How can i center my svg in css in the middle of viewport?

Basically, there were multiple things you need to correct.

SVG wrapper had unnecessary white-space. That was occupying space on the screen.
Minor tweaks in the css.

Please find the code below.

body {
  display: flex;
  margin-right: 0;
  background-color: #000;
  align-self: center;
  justify-content: center;
}

.logo-container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
}
.logo-container svg {
  width: 100%;
  max-width: 700px;
}
.letters {
  align-items: center;
  align-self: center;
  align-content: center;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="styles.css" />
    <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.0/lib/anime.min.js"></script>
  </head>
  <body>
    <div class="logo-container">
      
      <svg
        version="1.1"
        id="logo"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        x="0px"
        y="0px"
        viewBox="0 0 792.4 132.2"
        style="enable-background: new 0 0 792.4 132.2;"
        xml:space="preserve"
      >
        <style type="text/css">
          .st0 {
            fill: none;
            stroke: #ff0000;
            stroke-width: 3;
          }
        </style>
        <path
          class="st0"
          d="M1.5,3.8v124.7h36.1c34.3,0,62.9-26,62.9-62.4c0-36.3-28.7-62.3-62.9-62.3H1.5z M29.9,103.1V29.2h4.4
    c21.2,0,35.5,16.2,35.5,37c-0.2,20.9-14.5,36.9-35.5,36.9L29.9,103.1L29.9,103.1z M184.4,3.8H113v124.7h71.3v-24.9h-42.9V78.4h41.1
    V53.5h-41.1V28.7h42.9V3.8z M246.6,1.5c-20.1,0-40.7,14.8-40.7,38.1c0,13,8.8,24.6,23.7,32c14.8,7.4,28.1,11.5,28.1,20.6
    c0,11.6-11.8,12.2-18,12.2c-13.9,0-30.5-14.1-30.5-14.1l-14.2,23.9c0,0,17.7,16.5,46.8,16.5c24.3,0,47-10.4,47-40.2
    c0-16.3-15.3-28.1-29.2-34c-14.2-6-26-11-26-18c0-6.8,5.1-11.2,14.8-11.2c12.8,0,25.2,8.6,25.2,8.6l11.5-22.7
    C273.8,5.7,260.4,1.6,246.6,1.5L246.6,1.5z M330.7,3.8h-28.4v124.7h28.4L330.7,3.8L330.7,3.8z M461.5,58.6H404v21.9h28.7
    c0,15.3-13.5,24-27.1,24c-17.5,0-31.7-17.2-31.7-38.4c0-21.6,14.2-39,31.7-39c11,0,20.6,4.4,27.8,16L452,22.8
    C441.1,9.7,425.9,1.5,403.9,1.5c-35.1,0-60.8,28.9-60.8,64.7c0,35.7,27.2,64.5,60.8,64.5c24.5,0,50.8-13.5,57.6-45L461.5,58.6
    L461.5,58.6z M502.5,51.1h0.3l49.6,77.4h28.4V3.8h-28.4v77.4h-0.3L502.5,3.8h-28.4v124.7h28.4L502.5,51.1L502.5,51.1z M670.2,3.8
    h-71.3v124.7h71.3v-24.9h-42.9V78.4h41.1V53.5h-41.1V28.7h42.9V3.8L670.2,3.8z M686.6,3.8v124.7H715V79.2l38.1,49.3h36.1l-42.9-51.5
    c15.3-4.8,25.5-17.4,25.5-36.1c0-24.5-17.5-37-40.7-37L686.6,3.8L686.6,3.8z M715,59.1V26.4h3.3c10.7,0,23.6,0.8,23.6,16.3
    S729,59.1,718.3,59.1L715,59.1L715,59.1z"
        />
      </svg>

 
    </div>
    <script type="text/javascript">
      anime({
        targets: "#logo path",
        strokeDashoffset: [anime.setDashoffset, 0],
        easing: "easeInOutQuad",
        duration: 5000,
        direction: "alternate",
        loop: true,
      });
    </script>
  </body>
</html>

Placing an SVG in the center of the screen

Something like this?

Remove the <img> from the HTML:

body { 
    background: url('http://upload.wikimedia.org/wikipedia/commons/8/84/Konqi_svg.svg') no-repeat center center fixed;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-size: 25% 25%;
}

How to place and center text in an SVG rectangle

An easy solution to center text horizontally and vertically in SVG:

Set the position of the text to the absolute center of the element in which you want to center it:
- If it's the parent, you could just do x="50%" y ="50%".
- If it's another element, x would be the x of that element + half its width (and similar for y but with the height).
Use the text-anchor property to center the text horizontally with the value middle:
middle
The rendered characters are aligned such that the geometric middle of the resulting rendered text is at the initial current text position.
Use the dominant-baseline property to center the text vertically with the value middle (or depending on how you want it to look like, you may want to do central)

Here is a simple demo:

<svg width="200" height="100">
  <rect x="0" y="0" width="200" height="100" stroke="red" stroke-width="3px" fill="white"/>
  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">TEXT</text>    
</svg>

Center an SVG inside a DIV

Make the div position:relative and the svg position:absolute
For the svg give it top:(calc 50% - 24px) and left:(50% - 24px)

That's 50% of containing div's height minus half the height of svg and 50% of containing div's width minus half the width of svg. A position:absolute element (i.e. svg) boundaries are it's position:relative parent's (i.e. .foo) borders.

SNIPPET

.svg {  display: block;  margin: 0 auto;  position: absolute;  top: calc(50% - 24px);  left: calc(50% - 24px);}.foo {  height: 150px;  width: 150px;  position: relative;  border-radius: 50%;  border: 20px solid brown;  background: black;}

<div class="foo ball design">  <svg class="svg pen" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48">    <g>      <path data-color="color-2" fill="#e00" d="M5.586,15L15,5.586l-3.293-3.293c-0.391-0.391-1.023-0.391-1.414,0l-8,8 c-0.391,0.391-0.391,1.023,0,1.414L5.586,15z"></path>      <rect data-color="color-2" x="7.636" y="10.636" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -5.9203 14.293)" fill="#e00" width="13.313" height="7.314"></rect>      <rect data-color="color-2" x="28.05" y="29.636" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -14.3761 34.707)" fill="#e00" width="13.313" height="10.143"></rect>      <path data-color="color-2" fill="#e00" d="M44.085,35.329l-8.757,8.757l9.475,1.895C44.869,45.994,44.935,46,45,46 c0.263,0,0.518-0.104,0.707-0.293c0.236-0.236,0.339-0.575,0.273-0.903L44.085,35.329z"></path>      <path fill="#136f71" d="M45.707,12.293l-10-10c-0.391-0.391-1.023-0.391-1.414,0l-5.291,5.291l2.706,2.709 c0.39,0.391,0.39,1.024-0.001,1.414C31.511,11.902,31.256,12,31,12c-0.256,0-0.512-0.098-0.708-0.293l-2.705-2.708l-3.584,3.584 l1.711,1.711c0.391,0.391,0.391,1.023,0,1.414C25.52,15.902,25.264,16,25.008,16s-0.512-0.098-0.707-0.293l-1.711-1.711 l-3.586,3.586l3.711,3.711c0.391,0.391,0.391,1.023,0,1.414C22.52,22.902,22.264,23,22.008,23s-0.512-0.098-0.707-0.293 l-3.711-3.711l-3.586,3.586l1.711,1.711c0.391,0.391,0.391,1.023,0,1.414C15.52,25.902,15.264,26,15.008,26 s-0.512-0.098-0.707-0.293l-1.711-1.711l-3.586,3.586l3.711,3.711c0.391,0.391,0.391,1.023,0,1.414 C12.52,32.902,12.264,33,12.008,33s-0.512-0.098-0.707-0.293L7.59,28.996l-5.297,5.297c-0.391,0.391-0.391,1.023,0,1.414l10,10 C12.488,45.902,12.744,46,13,46s0.512-0.098,0.707-0.293l32-32C46.098,13.316,46.098,12.684,45.707,12.293z M38,16 c-1.105,0-2-0.895-2-2c0-1.105,0.895-2,2-2s2,0.895,2,2C40,15.105,39.105,16,38,16z"></path>    </g>  </svg></div>

Place square svg to the center of the screen, scale it to fit the screen's width and height with some constraints

The following works if the aspect ratio of the SVG is a given. If the aspect ratio of the SVG is dynamic, you have to use JavaScript, I believe.

This snippet works in modern browsers and takes full advantage of the relatively new vmin viewport-percentage length. Browser support is pretty good. For horizontal and vertical centering, the flexbox layout mode is leveraged. Again, browser support is pretty good.

The trick is that the dimensions of the SVG are set relative to either the width or the height of the screen, whichever is smallest. This means that even when we would set it to be 100vmin, the SVG is guaranteed to fit the screen (but barely). To enforce maximal dimensions, good old max-width and max-height are used, exactly as they are intended to be used.

html, body {  /* ensure that all of the viewport is used */  width: 100%;  height: 100%;  /* ensure that no scrollbars appear */  margin: 0;  padding: 0;    /* center SVG horizontally and vertically */  display: flex;  align-items: center;  justify-content: center;}
#picture {  /* ensure 1:1 aspect ratio, tweak 50 to make SVG larger */  width: 50vmin;  height: 50vmin;    /* set some maximum size (width and height need to match   * aspect ratio, 1:1 in this case */  max-width: 200px;  max-height: 200px;}

<svg id="picture" viewBox="0 0 100 100">  <circle cx="50" cy="50" r="50"></circle></svg>

Align Svg to Center of Screen