Vertically centre div

Question

I have a tall image acting as a left column (#watch) and a div as a right column (#watch-column), pushing up against the left. I'm trying to vertically centre the div but can't find anything that works.

What is the best way to be doing this? My site is somewhat fluid as you'll see. Thanks!

<section id="time-keeper-overview-id">
   <div class="row" id="watch-parent">
      <img id="watch" src="img/watch.png" class="img-responsive" alt="Responsive image">
      <div id="watch-column">
         <div id="time-keeper-description">
            <p>Insert paragraph of text here</p>
         </div>
         <img id="bus-stop-waves" src="img/bus-stop-waves.png" class="img-responsive" alt="Responsive image">
      </div>
   </div>
</section>

#watch {
  float: left;
  max-height: 100% !important;
  padding-right: 4%;
}

#watch-column {
  vertical-align: middle !important;
  overflow: hidden;
}

Full site is at http://goo.gl/O1q5B5

Try using margin: auto 0px. You can also check out this: http://stackoverflow.com/questions/396145/whats-the-best-way-of-centering-a-div-vertically-with-css. — Andrews Gyamfi, Jul 21 '14 at 02:47
Do check this stack overflow answer:http://stackoverflow.com/questions/24568255/center-content-of-a-div-vertically/24568391#24568391 — Sunil Hari, Jul 21 '14 at 02:50
AndyG: margin: auto 0px does nothing. Answers in the question linked require a fixed width or absolute position, which is not what I am after. It needs a fluid width because the height of the img column will vary according to browser height and the div needs to push up against the image. — user22215, Jul 21 '14 at 02:53

Frankie Loscavio · Answer 1 · 2014-07-21T02:56:30.550

I've noticed that using css display: table-cell; and alike css properties for table display's using divs or containers allow for vertical alignment.

display: table-cell;
vertical-align: middle;

Also setting the css line-height property with a value allows for vertical-align: middle; to work as well.

See also reference: http://css-tricks.com/centering-in-the-unknown/

Flex Box also allows for this type of alignment but the Flex Box isn't exactly the most compatible with older browsers that don't Automatic Update also known as "Ever Green" browsers - http://eisenbergeffect.bluespire.com/evergreen-browsers/

See Also - Flex Box Vertical Alignment: http://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

You can also use the position attributes in css both relative and absolute and then say top: 50%; It really all depends on how your design and requirements that best suit your project.

score 0 · Answer 2 · answered Jul 21 '14 at 02:56

0

Actually you can only achieve that by setting a height to the inner container. In your case, you should set a height for #time-keeper-description and set other properties on the outer container. Try this additions:

#time-keeper-description {
    height:500px /* or whatever suits your content */
}

#watch-column {
    position: absolute;
    top: 50%;
    margin-top: -250px; /* half of #time-keeper-description height */

}

If you can't set a fixed height, use this on your div:

display: table-cell;
vertical-align: middle;

Hope this helps! ;)

answered Jul 21 '14 at 02:56

rjpedrosa

652
2
7
10

position: absolute takes the column out of the flow such that it's no longer a column. Also display: table-cell does nothing in this instance. – user22215 Jul 21 '14 at 07:10
Can you provide a link for it? – rjpedrosa Jul 21 '14 at 17:15
http://goo.gl/O1q5B5 Yes, thanks kindly for your help but I think I've solved it with flexbox :) – user22215 Jul 22 '14 at 00:08

score 0 · Accepted Answer · answered Jul 22 '14 at 00:08

I'm going to answer my own question here. Thanks to all that posted though!

Flexbox provided the best solution in this situation, where the image had to be viewport height and auto width, but the rest of the design had to be fluid. Note that flex: 0 0 auto; working with max-height: 100%; enabled the image to be full height and still maintain the correct width.

#watch-parent {
   display: -webkit-flex;
   display: -moz-box;
   display: -ms-flexbox;
   display: flex;

   -webkit-align-items: center;
   -moz-box-align: center;
   -ms-align-items: center;
   align-items: center;
}

#watch {
   max-height: 100%;
   -webkit-flex: 0 0 auto;
   -moz-box-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
   padding-right: 4%;
}

Vertically centre div

3 Answers3