How to make sure that Bootstrap modal changes the height from down to up only?

I want a fixed top for modal when the height is changed. This is the HTML code.

<div class="modal fade" id="modal-action" tabindex="-1" role="dialog" aria-labelledby="capture-btn" aria-hidden="true">
        <div class="vertical-alignment-helper">
            <div class="modal-dialog vertical-align-center">
                <div class="modal-content">
                    <button type="button" id="close-modal-btn" class="close" data-dismiss="modal"><img id="btn-cross" src="img/cross.svg" alt="close"></button>
                    <div class="modal-header" id="modal-header-div">
                        <h4 class="modal-title modal-subject" id="my-modal-label">What do you want to do?</h4>
                    </div>
                    <div class="modal-body">
                        <button id="save-view-btn" class="btn-modal btn-links btn-active">Signup</button>
                        <button id="copy-link-btn" class="btn-modal btn-links">Login</button>
                    </div>
                    <div id="content-div">
                        <form>
                            // Some content
                        </form>
                    </div>
                </div>
            </div>
        </div
</div>

This is CSS for modal

.vertical-alignment-helper {
    display: table;
    height: 100%;
    pointer-events: none;
    width: 100%;
}

.vertical-align-center {
    display: table-cell;
    pointer-events: none;
    vertical-align: middle;
}

The modal will have dynamic body depended on the content. Depended on content, modal's height should change. This CSS does it for me. The modal is centered and the height changes. But what I really need is, the modal should be centered and the height should change only from the bottom. Top position should be fixed.

I tried to change the display:table to display:flex, it gave me fixed position for the modal but modal was not centered.

How to do this ?