Center Arrows Vertically On Both Sides of Div

Question

I've got two items I can't figure out. I'm trying to center both arrows shown in the image on either side of the div box (no matter what the height, they are always centered). The box is min-height and I need the arrows to be centered depending on the height of the box.

Also, when the media screen kicks in, I want them to always display on the left and right no matter where the user has scrolled. I don't have a clue how to keep them in place when the user scrolls.

Any help you can provide is appreciated.

CSS

#recout{
text-align:center;
width: 80%;
margin: 0 auto;
text-align: center;
}
.recleft,
.recright{
    display: inline-block;
    width: 50px;
    min-height: 550px;
    margin: 5px;
}
.recin{
    background: #000000;
    display: inline-block;
    vertical-align:top;
    min-height: 550px;
    margin: 0;
    width: 550px;
    border-radius: 70px 70px 0 0;
}

HTML

<div id= "recout">

<div class= "recleft"> 
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
  <circle fill="#9FA1A4" cx="25" cy="25" r="25"/>
  <g>
    <g>
      <path fill="#FFFFFF" d="M31.2,8.4c1,0,2,0.4,2.8,1c0.9,0.7,1.4,1.8,1.4,2.9c0,1.1-0.5,2.2-1.4,2.9l-11.8,10l11.8,10
        c0.9,0.7,1.4,1.8,1.4,2.9s-0.5,2.1-1.4,2.9c-1.5,1.3-4,1.3-5.5,0L13.2,28.1c-0.9-0.7-1.4-1.8-1.4-2.9c0-1.1,0.5-2.1,1.4-2.9
        L28.4,9.4C29.2,8.8,30.2,8.4,31.2,8.4z"/>
    </g>
  </g>
  </svg>
</div>

<div class= "recin"></div>

<div class= "recright">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
  <circle fill="#9FA1A4" cx="25" cy="25" r="25"/>
  <g>
    <g>
      <path fill="#FFFFFF" d="M20,42c-1,0-2-0.4-2.8-1c-0.9-0.7-1.4-1.8-1.4-2.9c0-1.1,0.5-2.2,1.4-2.9l11.8-10l-11.8-10
        c-0.9-0.7-1.4-1.8-1.4-2.9s0.5-2.1,1.4-2.9c1.5-1.3,4-1.3,5.5,0L38,22.3c0.9,0.7,1.4,1.8,1.4,2.9c0,1.1-0.5,2.1-1.4,2.9L22.7,41
        C22,41.7,21,42,20,42z"/>
    </g>
  </g>
  </svg>
</div>

Answer 1

If I understand you right you want the svg to be vertically centerd inside the .recleft and .recright respectively.

To do that use position: absolute on a wrapper around the svg (it looks weird when applying it directly to the svg), set top: 50%, this will center the div, and finally apply position: relative to the parent so that the wrapper div is absolutely positioned relative to this parent. See this JSFiddle

For the problem with the mobile view you would need to set position: fixed; like so: https://jsfiddle.net/m9xqnh8y/1/

And for the problem that if the .recin gains in height. I made a flexbox containing recleft, recin and recright, this way the other divs automatically take up the full height and thus the arrows also remain in the middle. See here