vertically center form group

Question

I have two columns in a row, and I'm trying to center my form in the left column vertically and horizontally. I've been able to get the form to be centered horizontally, but can't get it to be centered vertically; my code is in a jsfiddle: https://jsfiddle.net/martinradio/adqLpxn5/66/

<!-- new responsive input -->
        <style>
            .centerBlock {
            display: table;
            margin: auto;
            }
        </style>
        <div class="container" style='padding-right:0;margin-left:0;margin-right:0;'>
            <div class="row">
                <div class="col" style='background:blue;padding-left:0;padding-right:0;'>
                    <div class='centerBlock'>
                      <!-- trying to center this -->
                        <div class="form-group">
                            <div id='taggerErrDisplay'></div>
                            <input size="32" type="text" placeholder='Discogs URL' name="url" id="urlInput">
                            <button style="cursor: pointer;" id='urlInputButton' name="data" type="button" >Submit</button>
                        </div>
                    </div>
                    
                </div>
                <div class="col" style='background:red;padding-left:0;padding-right:0;'>
                    <div id="drop-area">
                        <form class="my-form">
                            <h5>Upload multiple files with the file dialog or by dragging and dropping files here.</h5>
                            <br>
                            <input style="cursor: pointer;" type="file" id="file" multiple="multiple" />
                        </form>
                    </div>
                </div>
            </div>
        </div>
</div>

And currently looks like this:

I tried setting the margins to auto based on other stackoverflow questions but wasn't successful, I'm trying to get my two columns to in the end look like this: