Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Horizontally Center an SVG

Recommended Posts

I have some SVG graphics.

I have them set with a

width:100% and height 100%

I am able to move them along the x axis using the viewport but not sure what to set it at to make it directly centered.

Thanks for your help.

The site url:


Edited by junger
Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

To help, one needs the site url. Consider editing your question (click on the small cogwheel icon to the right of the question title) to give this.

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to comment
  • 3 weeks later...

I put the url in the question. For the time being, I have the svg set with their width and height, because I could not center them when I had the width and height at 100%.


Edited by junger
Initial Revision
Link to comment
  • 1 month later...
  • 4 years later...

Paste the following at the top of your SVG code:

<div style=" display: flex; justify-content: center; align-items: center;">

Don't forget to close this by adding


 to the end of your code!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...