How to Center an SVG: Every Method Explained

Centering an SVG should be simple. And it is—once you know which method to use.

This guide covers every way to center SVGs, from quick one-liners to bulletproof techniques for complex layouts.

The Quick Answer

Horizontal centering:

svg {
  display: block;
  margin: 0 auto;
}

Vertical and horizontal centering:

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

Now let's explore all the methods.

Method 1: Flexbox (Recommended)

The most reliable way to center anything, including SVGs.

Center Horizontally

<div class="container">
  <svg viewBox="0 0 100 100" width="50" height="50">
    <circle cx="50" cy="50" r="40" fill="blue"/>
  </svg>
</div>

.container {
  display: flex;
  justify-content: center;
}

Center Vertically

.container {
  display: flex;
  align-items: center;
  height: 200px; /* Container needs height */
}

Center Both (Horizontal + Vertical)

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Full viewport height */
}

Why Flexbox works best:

• Works regardless of SVG dimensions
• Handles dynamic sizing
• No need to know exact measurements
• Works for inline and block SVGs

Method 2: CSS Grid

Even simpler syntax than Flexbox for centering.

Center Both Axes

.container {
  display: grid;
  place-items: center;
  height: 200px;
}

That's it. place-items: center centers both horizontally and vertically.

Center Horizontally Only

.container {
  display: grid;
  justify-items: center;
}

Center Vertically Only

.container {
  display: grid;
  align-items: center;
  height: 200px;
}

Grid vs Flexbox for centering: Both work equally well. Use whichever you're already using in your layout.

Method 3: Margin Auto

Classic technique for horizontal centering of block elements.

svg {
  display: block;
  margin-left: auto;
  margin-right: auto;
  /* Or shorthand: */
  margin: 0 auto;
}

Important: The SVG must be display: block. Inline elements ignore margin auto.

With Fixed Width

svg {
  display: block;
  width: 100px;
  margin: 0 auto;
}

Centering in Container

<div class="container">
  <svg class="centered-svg" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40"/>
  </svg>
</div>

.container {
  width: 100%;
}

.centered-svg {
  display: block;
  width: 50%;
  margin: 0 auto;
}

Limitation: Margin auto only centers horizontally. For vertical centering, use Flexbox or Grid.

Method 4: Absolute Positioning

When you need precise control or are centering over other content.

Center Both Axes

.container {
  position: relative;
  height: 200px;
}

svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

How it works:

1. top: 50% moves the top edge to the center
2. left: 50% moves the left edge to the center
3. transform: translate(-50%, -50%) shifts it back by half its own dimensions

Center Horizontally Only

svg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

Center Vertically Only

svg {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Using Inset (Modern CSS)

svg {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100px;  /* Must have explicit dimensions */
  height: 100px;
}

When to use absolute positioning:

• Overlaying SVG on other content
• Complex layouts where flex/grid isn't available
• When you need z-index layering

Method 5: Text-Align (Inline SVGs)

For inline SVGs, treat them like text.

<div class="container">
  <svg viewBox="0 0 100 100" width="50" height="50">
    <circle cx="50" cy="50" r="40"/>
  </svg>
</div>

.container {
  text-align: center;
}

svg {
  display: inline-block;
  vertical-align: middle;
}

Use cases:

• SVG icons next to text
• SVGs that should flow with content
• Multiple SVGs in a row, centered as a group

Centering Icon with Text

<button>
  <svg viewBox="0 0 24 24" width="16" height="16">
    <path d="..."/>
  </svg>
  Click me
</button>

button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Or without flexbox: */
button svg {
  vertical-align: middle;
}

Method 6: Line-Height Trick

Vertically center an inline SVG using line-height.

.container {
  height: 200px;
  line-height: 200px;
  text-align: center;
}

svg {
  vertical-align: middle;
}

Note: This only works when container height equals line-height. It's hacky—prefer Flexbox.

Centering SVG Content Inside the SVG

Sometimes you need to center shapes within the SVG itself, not the SVG within the page.

Center Shape in ViewBox

<svg viewBox="0 0 100 100">
  <!-- Circle centered in viewBox -->
  <circle cx="50" cy="50" r="40"/>
</svg>

For viewBox="0 0 100 100", the center is at (50, 50).

Center Text in SVG

<svg viewBox="0 0 200 100">
  <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle">
    Centered Text
  </text>
</svg>

Key attributes:

• x="50%" — Horizontal position at center
• y="50%" — Vertical position at center
• text-anchor="middle" — Anchor point at text center
• dominant-baseline="middle" — Vertical alignment at middle

Center Group of Elements

<svg viewBox="0 0 200 100">
  <g transform="translate(100, 50)">
    <!-- Elements centered at (100, 50) -->
    <circle cx="0" cy="0" r="20"/>
    <circle cx="-30" cy="0" r="10"/>
    <circle cx="30" cy="0" r="10"/>
  </g>
</svg>

Use transform="translate(x, y)" to move a group to the center, then position elements relative to (0, 0).

Responsive Centered SVGs

Center SVGs that scale with their container.

Fluid Width, Centered

<div class="container">
  <svg viewBox="0 0 100 100" class="responsive-svg">
    <circle cx="50" cy="50" r="40"/>
  </svg>
</div>

.container {
  display: flex;
  justify-content: center;
}

.responsive-svg {
  width: 50%;
  max-width: 300px;
  height: auto;
}

Full-Width Centered

svg {
  display: block;
  width: 100%;
  height: auto;
}

No horizontal centering needed when SVG fills the container.

Centered with Aspect Ratio

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

.svg-container svg {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1 / 1;
}

Learn more about SVG scaling in SVG viewBox Explained.

Common Centering Problems

SVG Not Centering with Margin Auto

Problem: margin: 0 auto doesn't work.

Cause: SVG is still display: inline (default).

Fix:

svg {
  display: block;
  margin: 0 auto;
}

Vertical Centering Not Working

Problem: SVG isn't vertically centered.

Cause: Container doesn't have a defined height.

Fix:

.container {
  display: flex;
  align-items: center;
  height: 100vh; /* Or any explicit height */
  min-height: 200px;
}

SVG Overflows When Centered

Problem: Large SVG spills outside its container.

Fix:

svg {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

Centered SVG Has Extra Space Below

Problem: Mysterious gap under inline SVG.

Cause: Inline elements reserve space for descenders (like the tail of "g").

Fix:

svg {
  display: block;
  /* or */
  vertical-align: bottom;
}

Quick Reference

| Goal | CSS | |------|-----| | Center horizontally | display: block; margin: 0 auto; | | Center vertically | display: flex; align-items: center; on container | | Center both | display: grid; place-items: center; on container | | Center inline with text | vertical-align: middle; | | Center absolutely | position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); |

Best Practices

1. Use Flexbox or Grid — Most reliable, least code
2. Don't forget container height — Vertical centering requires defined height
3. Set display: block for margin auto — Inline elements ignore auto margins
4. Use viewBox for internal centering — Center shapes within the SVG coordinate system
5. Test responsiveness — Ensure centering works at all screen sizes

Generating Centered SVGs

When you generate SVGs with SVG Genie, they come with proper viewBox values that make centering straightforward. The content is already centered within the SVG coordinate system—you just need to center the SVG element itself using the techniques above.

For icons and logos, having content properly centered within the viewBox means you can drop them into any layout and apply simple centering CSS without adjusting the SVG code.

---

Related Articles:

• SVG viewBox Explained
• How to Make SVG Responsive
• Adaptive SVGs with CSS Custom Properties
• Why Is My SVG Blurry?