Center form content vertically - html

Question

I've got the following landing page form (I've cut all the unnecessary stuff I don't think matters leaving only minimum of style). Here is the code (I'm using Bootstrap 3.3.5):
<div class="col-md-6 app-door">
<form class="image-hover text-center">
<h3>Application name</h3>
<div class="landing-page-form-group">
<label class="landing-page-label">Label: </label>
<input class="form-control landing-page-input">
</div>
<button class="btn">Submit</button>
</form>
<div class="center-block app-link some-img"/>
</div>
..and css
.image-hover {
width: 300px;
height: 300px;
background-color: rgba(0, 0, 0, 0.7) !important;
position: absolute;
z-index: 100;
color: #cccccc;
margin: 0 auto;
left: 0;
right: 0;
border-radius: 25px;
}
.landing-page-form-group {
padding-top: 16px;
padding-bottom: 16px;
}
.landing-page-label {
width: 100px;
vertical-align: middle;
}
.landing-page-input {
width: 150px;
display: inline-block;
}
.app-link {
width: 300px;
height: 300px;
background-size: 100% 100%;
border-radius: 25px;
}
.some-img {
background-image: url("http://dl.hiapphere.com/data/icon/201511/HiAppHere_com_com.ludicside.mrsquare.png");
}
I want to center all the form inputs and etc vertically. I've tried such things as playing with position (relative on parent, absolute on child), vertical-align, top, maybe something else I don't remember right now as I spent lots of hours trying.
I'm not a great specialist in frontend development (I mean html/css) so I will be extremely happy to see understanding although the problem seems to be basic enough.
Thank you for any ideas!

Answer 1

updated
check the solution without flex demo here
Try this
check demo here
add the following styles to your existing .image-hover class
CSS:
.image-hover {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
}

Answer 2

Simplest method would be to use
.image-hover {
display: flex;
align-items : center;
justify-content: center;
}
The align-items takes care of vertical centering, and justify-contents, the horizontal centering.

Answer 3

This is my solution:
https://jsfiddle.net/0x9epxah/1/
add div .inner-form:
<div class="col-md-6 app-door">
<form class="image-hover text-center">
<div class="inner-form">
<h3>Application name</h3>
<div class="landing-page-form-group">
<label class="landing-page-label">Label: </label>
<input class="form-control landing-page-input">
</div>
<button class="btn">Submit</button>
</div>
</form>
<div class="center-block app-link some-img"/>
</div>
and this css class:
.inner-form {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
}