How to make it so that a centered svg image with equal indents is displayed at all resolutions?

Question

css

An svg image is set as background in the block . How to make it so that a centered image is displayed, regardless of the size of the devices, while the indents remain constant and the image does not go beyond the borders? fiddle

<div class="rectangle"></div>
<div class="work-scheme"></div>
<div class="rectangle"></div>

.work-scheme {
  background: url(http://a-lot-of-money.ru/wp-content/uploads/work-scheme.svg) no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  min-height: 258px;
  height: 1px;
  display: block;
  margin: 0 auto;
}

.rectangle {
  background-color: red;
  height: 10px;
}

While it is possible to adjust the size of svg by setting the min-height parameters in media-queries , but this is a crutch.
If you use
background-size: cover;
that, it will not save the situation either (it is enough to move the resolution and you can see how the picture is cut off at large and the indents from the blocks begin to increase) - fidl

Answer 1

Well, what is the standard reception not satisfied with?
left:50%;
top:50%;
transform: translate(-50%, -50%);
UPD: here