-3

I know there are answers for this and I have tried troubleshooting with provided answers.

However even with the bootstrap class "text-center" my h1 tag is still not in the middle of my screen vertically, only horizontally. here is the html with targeting css. Thanks

    #hero-area {
      background: url(../img/hero-area.png) fixed no-repeat;
      background-size: cover;
      color: #fff;
      overflow: hidden;
      position: relative;
    }
    
    #hero-area .overlay {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0px;
      left: 0px;
      background: #61D2B4;
      opacity: 0.9;
    
    }
    
    #hero-area .contents {
      padding: 600px 0 130px;
      }
    
    #hero-area .contents h1 {
      color: #fff;
      font-size: 60px;
      font-weight: 600;
      margin-bottom: 25px;
      letter-spacing: 5px;
    }
    <div class="container">
         <div class="row justify-content-md-center">
              <div class="col-md-10">
                   <div class="contents text-center">
                        <h1 class="wow fadeInDown text-center" data-wow-duration="1000ms" data-wow-delay="0.3s">HART FERTILITY CLINIC</h1>
                           <p class="lead  wow fadeIn" data-wow-duration="1000ms" data-wow-delay="400ms">HOLISTIC ASSISTED REPRODUCTION TREATMENT
                           <br>
                           <br>CAPE TOWN</p>
                   </div>
              </div>
         </div>
    </div>
Fabio_MO
  • 713
  • 1
  • 13
  • 26
Quinton Vorstman
  • 1

1 Answers1

0

If you are working with the newest Twitter-Bootstrap you can easily look into the documentation for the grid. There you find a class called:

align-items-center

that centers your content vertically.

For more information: https://getbootstrap.com/docs/4.0/layout/grid/#vertical-alignment

JKortmann
  • 39
  • 4