I'm broken down on struggle street. What I'm trying to do is vertically center text that is inside an already centered div using css3 transform. I have tried so many different methods and have had zero luck. I don't want to just add padding to the top of the text, is there any other way? The div height will also change because it is responsive.
Heres my code-
html,
body {
width: 100%;
height: 100%;
}
.intro {
height: 100%;
width: 100%;
background-color: #83fec6;
color: #3a58e9;
}
.intro .container {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
<section class="intro">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4">
<img src="http://placehold.it/300x300&text=CHUMP">
</div>
<div class="col-md-8 col-sm-8">
<h1>CENTER ME VERTICALLY<br>OH YEAH</h1>
</div>
</div>
</div>
</section>