Centering vertically - Position: absolute not working - html

Question

I have been having problems when trying to center a div vertically. From what I have read I have tried with flexbox but failed and then I tried with position: absolute but also failed, e.g.
HTML:
<div="parent">
<div="child">
<h1>Hello World</h1>
<h3>This is a subtitle</h3>
</div>
</div>
CSS:
.parent{
position: relative;
}
.child{
position: absolute;
top: 50%;
transform: translateY(50%);
}
From what I have been reading this should work, so here is my actual code hoping that you guys can find the solution to my problem.
HTML:
<section class="mainSection">
<div class="container">
<div class="row">
<div class="col-md-8">
<!-- THIS IS THE SECTION THAT I CAN'T GET TO WORK -->
<div class="mainSection-mainTitleWrapper">
<div class="mainSection-mainTitle">
<h1>Creating value</h1>
<h3>Through quality assets</h3>
</div>
</div>
<!-- THIS IS THE END OF THE SECTION THAT I CAN'T GET TO WORK -->
</div>
<div class="col-md-4">
<div class="contactForm">
<h4>Buy, Sale & Rent</h4>
<p>Lorem ipsum is simply dummy text of the printing and typesetting industry. Lorem ipsum has been the industry's standard dummy text.</p>
<form>
<input type="text" name="user_name" placeholder="FULL NAME">
<input type="emial" name="user_email" placeholder="EMAIL">
<input type="tel" name="user_phone" placeholder="PHONE">
<select>
<option value="buy">BUY</option>
<option value="sale">SALE</option>
<option value="rent">RENT</option>
</select>
<select>
<option value="price" disabled selected>PRICE</option>
<option><$100,000.00</option>
<option><$200,000.00</option>
<option><$400,000.00</option>
<option><$600,000.00</option>
<option><$1,000,000.00</option>
</select>
<input type="submit" name="find" value="FIND NOW">
</form>
</div>
</div>
</div>
</div>
</section>
CSS:
.mainSection{
background: url('img/background.jpg') no-repeat center center;
background-size: cover;
box-shadow: inset 0 0 0 1000px rgba(0,0,0,0.4);
padding-bottom: 50px;
}
.mainSection-mainTitleWrapper{
position: relative;
}
.mainSection-mainTitle{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.mainSection-mainTitle h1{
font-size: 65px;
color: #fff;
font-weight: bold;
text-transform: uppercase;
}
.mainSection-mainTitle h3{
font-size: 35px;
color: #fff;
font-weight: bold;
text-transform: uppercase;
}
Sorry for the lengthy question, but does anyone have an idea of why is it not working or another possible solution to vertically center the .mainSection-mainTitle div?

Answer 1

Vertical align middle works, but you will have to use table-cell on your parent element and inline-block on the child.
This solution is not going to work in IE6 & 7.
The classic solution (table layout)
Look at this fiddle:
http://jsfiddle.net/mcSfe/
Tested in:
FF3.5
FF4
Safari 5
Chrome 11 & 12
IE9
HTML
Your parent div must have a set hight. Otherwise the child will not know what 50% of nothing is.
<div class="cn">
<div class="inner">your content</div>
</div>
CSS
.cn {
display: table-cell;
width: 500px;
height: 500px;
vertical-align: middle;
text-align: center;
}
.inner {
display: inline-block;
width: 200px; height: 200px;
}
Modern solution (transform)
Since transforms are fairly well supported now (http://caniuse.com/#search=2d%20transforms) there is an easier way to do it.
CSS
.cn {
position: relative;
width: 500px;
height: 500px;
}
.inner {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
width: 200px;
height: 200px;
}
Look here:
http://jsfiddle.net/0tc6ycvo/1/