Óscar Aguayo
Óscar Aguayo

Reputation: 149

Centering vertically - Position: absolute not working

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?

Upvotes: 2

Views: 5834

Answers (1)

manneJan89
manneJan89

Reputation: 1024

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/

    Upvotes: 4

    Related Questions