How to center svg background-image?

Question

I´m trying to center a svg inside a div, how to do it?

 div{ width: 50px; height: 70px; background-size: 50px 70px; background-position: center; background-repeat: no-repeat; background-color: #80808026; background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='xMinYMid'%3E%3Cpath d='m7.9061 94.618c-1.5466-0.31515-3.9582-2.0543-5.3591-3.8647-2.4322-3.1433-2.547-5.1007-2.547-43.426v-40.134l6.0864-7.1931h105.1l6.0864 7.1931v80.47l-6.0844 7.1931-50.233 0.16674c-27.628 0.09179-51.499-0.09114-53.045-0.40627zm101.03-10.12c0.99887-2.6461 0.99887-71.491 0-74.137-0.67996-1.8013-6.2944-2.0276-50.304-2.0276-44.009 0-49.624 0.22631-50.304 2.0276-0.99887 2.6461-0.99887 71.491 0 74.137 0.67996 1.8013 6.2944 2.0276 50.304 2.0276 44.009 0 49.624-0.22631 50.304-2.0276zm-93.185-8.256c-1.6278-5.2137 0.78601-9.7972 10.127-19.229l9.3902-9.4821 4.1767 4.1152c2.2972 2.2634 4.6883 4.1152 5.3136 4.1152 0.62532 0 7.8548-6.745 16.065-14.989l14.928-14.989 25.123 25.443v27.608h-42.157c-41.206 0-42.175-0.05845-42.967-2.5925zm3.7346-40.291c-7.0647-7.1817-2.1636-19.927 7.6628-19.927 6.0314 0 11.939 5.7087 11.939 11.537 0 9.7092-12.881 15.223-19.602 8.3903z' fill='%23b8bdc9' stroke-width='1.2714'/%3E%3C/svg%3E%0A"); } 

 <div></div> 

Answer 1

You need to fix the viewBox of your <svg> .

Setting it to 0 0 117 95 will make your path take the full viewport

 div{ width: 50px; height: 70px; background-size: 50px 70px; background-position: center; background-repeat: no-repeat; background-color: #80808026; background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 117 95' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='xMidYMid'%3E%3Cpath d='m7.9061 94.618c-1.5466-0.31515-3.9582-2.0543-5.3591-3.8647-2.4322-3.1433-2.547-5.1007-2.547-43.426v-40.134l6.0864-7.1931h105.1l6.0864 7.1931v80.47l-6.0844 7.1931-50.233 0.16674c-27.628 0.09179-51.499-0.09114-53.045-0.40627zm101.03-10.12c0.99887-2.6461 0.99887-71.491 0-74.137-0.67996-1.8013-6.2944-2.0276-50.304-2.0276-44.009 0-49.624 0.22631-50.304 2.0276-0.99887 2.6461-0.99887 71.491 0 74.137 0.67996 1.8013 6.2944 2.0276 50.304 2.0276 44.009 0 49.624-0.22631 50.304-2.0276zm-93.185-8.256c-1.6278-5.2137 0.78601-9.7972 10.127-19.229l9.3902-9.4821 4.1767 4.1152c2.2972 2.2634 4.6883 4.1152 5.3136 4.1152 0.62532 0 7.8548-6.745 16.065-14.989l14.928-14.989 25.123 25.443v27.608h-42.157c-41.206 0-42.175-0.05845-42.967-2.5925zm3.7346-40.291c-7.0647-7.1817-2.1636-19.927 7.6628-19.927 6.0314 0 11.939 5.7087 11.939 11.537 0 9.7092-12.881 15.223-19.602 8.3903z' fill='%23b8bdc9' stroke-width='1.2714'/%3E%3C/svg%3E%0A"); } 

 <div></div> 

You can now control better its size through CSS:

 div{ width: 50px; height: 70px; background-size: 35px 50px; background-position: center; background-repeat: no-repeat; background-color: #80808026; background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 117 95' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='xMidYMid'%3E%3Cpath d='m7.9061 94.618c-1.5466-0.31515-3.9582-2.0543-5.3591-3.8647-2.4322-3.1433-2.547-5.1007-2.547-43.426v-40.134l6.0864-7.1931h105.1l6.0864 7.1931v80.47l-6.0844 7.1931-50.233 0.16674c-27.628 0.09179-51.499-0.09114-53.045-0.40627zm101.03-10.12c0.99887-2.6461 0.99887-71.491 0-74.137-0.67996-1.8013-6.2944-2.0276-50.304-2.0276-44.009 0-49.624 0.22631-50.304 2.0276-0.99887 2.6461-0.99887 71.491 0 74.137 0.67996 1.8013 6.2944 2.0276 50.304 2.0276 44.009 0 49.624-0.22631 50.304-2.0276zm-93.185-8.256c-1.6278-5.2137 0.78601-9.7972 10.127-19.229l9.3902-9.4821 4.1767 4.1152c2.2972 2.2634 4.6883 4.1152 5.3136 4.1152 0.62532 0 7.8548-6.745 16.065-14.989l14.928-14.989 25.123 25.443v27.608h-42.157c-41.206 0-42.175-0.05845-42.967-2.5925zm3.7346-40.291c-7.0647-7.1817-2.1636-19.927 7.6628-19.927 6.0314 0 11.939 5.7087 11.939 11.537 0 9.7092-12.881 15.223-19.602 8.3903z' fill='%23b8bdc9' stroke-width='1.2714'/%3E%3C/svg%3E%0A"); } 

 <div></div> 

But of course, you could also set it directly to a value that will only center it, for instance -41.5 -52.5 200 200 will do

 div{ width: 50px; height: 70px; background-size: 50px 70px; background-position: center; background-repeat: no-repeat; background-color: #80808026; background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='-41.5 -52.5 200 200' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='xMinYMid'%3E%3Cpath d='m7.9061 94.618c-1.5466-0.31515-3.9582-2.0543-5.3591-3.8647-2.4322-3.1433-2.547-5.1007-2.547-43.426v-40.134l6.0864-7.1931h105.1l6.0864 7.1931v80.47l-6.0844 7.1931-50.233 0.16674c-27.628 0.09179-51.499-0.09114-53.045-0.40627zm101.03-10.12c0.99887-2.6461 0.99887-71.491 0-74.137-0.67996-1.8013-6.2944-2.0276-50.304-2.0276-44.009 0-49.624 0.22631-50.304 2.0276-0.99887 2.6461-0.99887 71.491 0 74.137 0.67996 1.8013 6.2944 2.0276 50.304 2.0276 44.009 0 49.624-0.22631 50.304-2.0276zm-93.185-8.256c-1.6278-5.2137 0.78601-9.7972 10.127-19.229l9.3902-9.4821 4.1767 4.1152c2.2972 2.2634 4.6883 4.1152 5.3136 4.1152 0.62532 0 7.8548-6.745 16.065-14.989l14.928-14.989 25.123 25.443v27.608h-42.157c-41.206 0-42.175-0.05845-42.967-2.5925zm3.7346-40.291c-7.0647-7.1817-2.1636-19.927 7.6628-19.927 6.0314 0 11.939 5.7087 11.939 11.537 0 9.7092-12.881 15.223-19.602 8.3903z' fill='%23b8bdc9' stroke-width='1.2714'/%3E%3C/svg%3E%0A"); } 

 <div></div> 

Answer 2

Change the background position like this:

 div{ width: 50px; height: 70px; background-size: 50px 70px; background-position: 10px 13px; background-repeat: no-repeat; background-color: #80808026; background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='xMinYMid'%3E%3Cpath d='m7.9061 94.618c-1.5466-0.31515-3.9582-2.0543-5.3591-3.8647-2.4322-3.1433-2.547-5.1007-2.547-43.426v-40.134l6.0864-7.1931h105.1l6.0864 7.1931v80.47l-6.0844 7.1931-50.233 0.16674c-27.628 0.09179-51.499-0.09114-53.045-0.40627zm101.03-10.12c0.99887-2.6461 0.99887-71.491 0-74.137-0.67996-1.8013-6.2944-2.0276-50.304-2.0276-44.009 0-49.624 0.22631-50.304 2.0276-0.99887 2.6461-0.99887 71.491 0 74.137 0.67996 1.8013 6.2944 2.0276 50.304 2.0276 44.009 0 49.624-0.22631 50.304-2.0276zm-93.185-8.256c-1.6278-5.2137 0.78601-9.7972 10.127-19.229l9.3902-9.4821 4.1767 4.1152c2.2972 2.2634 4.6883 4.1152 5.3136 4.1152 0.62532 0 7.8548-6.745 16.065-14.989l14.928-14.989 25.123 25.443v27.608h-42.157c-41.206 0-42.175-0.05845-42.967-2.5925zm3.7346-40.291c-7.0647-7.1817-2.1636-19.927 7.6628-19.927 6.0314 0 11.939 5.7087 11.939 11.537 0 9.7092-12.881 15.223-19.602 8.3903z' fill='%23b8bdc9' stroke-width='1.2714'/%3E%3C/svg%3E%0A"); } 

 <div></div> 

The problem is that the SVG is not just the image you want to center, but also some transparent parts around it. I would remake the SVG and clear all the transparent parts so that the SVG just contains that shape you want. It will be way easier to center (just use background-position: center center; )