Untitled

<!DOCTYPE html>
<head>
    <title>Trains, Planes, Automobiles, and Boats</title>
    <meta charset="UTF-8">
    <style type="text/css" media="screen">
        html, body { background:#ddd; margin:0; padding:0; height:100%; }
        #foo { position:absolute; left:5%; width:60%; top:5%; height:80%; background:#dcc; }
        #bar { position:absolute; left:70%; width:25%; top:5%; height:80%; background:#cbd; vertical-align: middle; }

        .fullwidth { width: 100%; vertical-align: middle; }

        .vcenter {
            display: block;
            margin: 0 auto;
        }

    </style>
</head>
<body>
    <div id="foo">
        <div class="vcenter">
            <img class="fullwidth" src="https://openclipart.org/image/800px/svg_to_png/19623/philrich123-A380.png" />
        </div>
    </div>
    <div id="bar">
        <img class="fullwidth" src="https://openclipart.org/image/800px/svg_to_png/4703/ryanlerch-Steam-Train-Engine.png" />
        <img class="fullwidth" src="https://openclipart.org/image/800px/svg_to_png/19623/philrich123-A380.png" />
        <img class="fullwidth" src="http://openclipart.org/image/800px/svg_to_png/74557/rally-car.png" />
        <img class="fullwidth" src="https://openclipart.org/image/800px/svg_to_png/196201/Model-T-Ford.png&disposition=attachment" />
        <img class="fullwidth" src="https://openclipart.org/image/800px/svg_to_png/24418/Jarno-Boat-1.png&disposition=attachment" />
    </div>
</body>

#bar{
   overflow: scroll;
}

position: relative;
top: 50%;
transform: translateY(-50%);