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.
Center an SVG inside a DIV
- Make the div
position:relative
and the svgposition:absolute
- For the svg give it
top:(calc 50% - 24px)
andleft:(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>
Why my svg is not centered inside div container?
Its because text-align: center
would not center the <svg>
. You need to apply the flexbox
properties to the direct parent of the <svg>
, which is .services-branding
like shown below:
.services-container {
width: 100%;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.services-container svg {
width: 70px;
}
.services-branding {
width: 300px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.services-branding figcaption {
text-align: center;
}
.services-branding p {
text-align: center;
}
<div class="services-container">
<figure class="services-branding">
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="124" viewBox="0 0 120 124">
<g>
<g>
<g><path fill="#d84848" d="M120 14H56v66h64L99.844 47z" /></g>
<g><path fill="#aa1f1f" d="M56 66.75V80l17-11z" /></g>
<g><path fill="#f57b71" d="M73 69H25L6.656 5H73z" /></g>
<g>
<path
fill="#daeaf2"
d="M4.436.18a5 5 0 0 1 6.123 3.536l30.54 113.98a5 5 0 0 1-9.658 2.587L.9 6.304A5 5 0 0 1 4.435.18z"
/>
</g>
</g>
</g>
</svg>
<figcaption>branding</figcaption>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.
</p>
</figure>
</div>
centering an SVG inside a div
You are setting the width to 100%, then shifting it over by 100px. The width is still calculated as whatever the 100% width is. To center it the way you want, you will need to subtract 100px from the width or nest things differently.
.main {
position:fixed;
left:100px;
height: 100%;
width:calc(100% - 100px);
background: #33AAAA;
}
Align svg to center of screen
Try CSS:
#svgMain {margin-left:auto; margin-right:auto; display:block;}
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>
vertical center svg in div container
html, body { height: 100%; }#svg-container{ display: flex; align-items: center; background-color: red; height: 100%;}
#svg-1{ margin: 0 auto; display: block;}
<div id="svg-container"> <svg id="svg-1" height="15px" width="15px" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle r="15" cx="15" cy="15"></circle> </svg></div>
What's the best way to center an SVG horizontally and vertically inside a div tag?
If you plan on setting fixed positions, pixel sizes and margins yourself, just adjust the svg vertical margin.
<div style="width: 64px;height: 64px;background-color: rgba(0,0,0,.7);background-repeat: no-repeat;background-size: 24px;background-position: 58% 50%;border-radius: 500px;border: 1px solid blue;cursor: pointer;"> <svg viewBox="-22 0 1229 1481" width="24" height="29" style="display:block;margin:16px auto;background-color:green;"> <path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z" fill="red"/> </svg> </div>
Related Topics
Header and Footer in Each Page in Print Mode With CSS
Overriding the Encapsulated CSS of External Component
How to Add Fonts to Create-React-App Based Projects
How to Get the Footer to Stay At the Bottom of a Web Page
Change a Html5 Input'S Placeholder Color With Css
Canvas Is Stretched When Using CSS But Normal With "Width"/"Height" Properties
Css Customized Scroll Bar in Div
How to Align a ≪Div≫ to the Middle (Horizontally/Width) of the Page
How to Easily Horizontally Center a ≪Div≫ Using Css
How to Place Two Divs Next to Each Other
Select Elements by Attribute in Css
Floating Elements Within a Div, Floats Outside of Div. Why
Why Does Height 100% Work When Doctype Is Removed