Center Elements on Screen while Keeping Responsiveness
<p>I'm trying to figure out a way to position the <strong>brown chevrons</strong> such that as the it <strong>vertically</strong> stays at the <strong>center</strong> of the screen as the user scrolls but does't cut into either the header image or footer.</p>

<p>I know this can be solved with <code>position: absolute</code>, but I want to keep Bootstrap's responsiveness. How do I go about doing that?</p>

<p>Header
<a href="https://i.stack.imgur.com/zMxqq.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zMxqq.jpg" alt="enter image description here"></a></p>

<p>Footer
<a href="https://i.stack.imgur.com/5vVpw.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5vVpw.jpg" alt="enter image description here"></a></p>