Вертикальное выравнивание в Bootstrap CSS

Делаю через Bootstrap 3, нужно выравнивание нескольких (любых объектов) с чётным-нечётным количеством (не строчные!). Примеры с прописыванием точных размеров в px не предлагать, только в %.
Вот пример кода:

<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-offset-1 col-lg-offset-1">
            <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-md-offset-1 col-lg-offset-1">
                <div class="kostnormaltext">Подсказки</div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
                <div class="center-block">
                    <img class="center-block img-responsive img-rounded" src="{% static 'img/scrip_key.jpg' %}" id="fillimage" alt="">
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
                <div class="">
                    <button onclick="" type="button" class="btn btn-success" id="buttoncheck">Звук</button>
                    <button onclick="" type="button" class="btn btn-success" id="buttoncheck">Проверить</button>
                    <button onclick="" type="button" class="btn btn-success" id="buttoncheck">Следующая нота</button>
                </div>
            </div>
        </div>
    </div>
</div>

При этом нужно сделать так, чтобы эти элементы были всегда вертикально в центре своей колонки, независимо от масштабирования экрана. но зависимо от общего размера всего ряда!. По-сути есть 1 ряд в нём 3 колонки (разделены тёмно-жёлтым цветом) и синяя центральная линия, к которой нужно выравнивать (не важно какой блок двигать, parent-зелёный или child-красный).