CODEWITHSUNDEEP
htmlcsscss-positionvertical-alignment
ivanacorovic
ivanacorovic

Reputation: 2867

Why is top attribute not working with position relative?

I am trying to vertically align a div inside a div, and I used this tutorial:

.element
{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

It worked on a div in a section above the one I'm currently working on. However, now top: 50% does nothing. Why is that?

This is the code:

<div id="venuerow" class="clearfix row" style="position: relative;">
    <div class="col-sm-12 col-md-6" 
        style="position: relative; top: 50%; transform: translateY(-50%);">
        center this
    </div>
    <div class="col-sm-12 col-md-6">
        1<br>
        2<br>
        3<br>
    </div>
</div>

Here, I expect top: 50% to push my inner div down so it starts from the middle of the outside div, and then transform should move it up for half of inner div's height.

Upvotes: 1

Views: 1649

Answers (1)

Alex
Alex

Reputation: 8695

It works. Try this: Jsfiddle

 html,
 body,
 #venuerow {
   height: 100%;
   text-align: center;
 }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="venuerow" class="clearfix row" style="position: relative;">
  <div class="col-sm-12 col-md-6" style="position: relative;
             top: 50%; transform: translateY(-50%);">
    center this
  </div>
</div>

Upvotes: 1

Related Questions