0

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.

Play my fiddle

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>

0 Answers0