Vertical center of a div not working

Question

Possible Duplicate:
How to align a <div> to the middle of the page

I'm trying to center my div "contact-box" horizontally and vertically within div "contact-us". It works horizontally but not vertically, any idea why? Tks

HTML

<div id="contact-us">
<div id="contact-box">
<p><b>Company Name</b></p>
<p>Company street</p>
<p>Company city</p>
<p>Company country</p><br />
<a href="#inline" class="modalbox">Contact Us</a>
<img src="images/email-icon.png" alt="Picture" /></div>
</div>

CSS

#contact-us {
    height: 1300px;
    background: #8aba56;
    padding-top: 250px;
    background: url(../images/bg-water13.jpg) no-repeat center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover; 
}


#contact-box {
    text-align:center;
    display:block;
    vertical-align:middle;
    font: 12px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 400;
    width: 300px;
    Height:120px;
    padding:15px;
    margin-left: auto;
    margin-right: auto;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
    filter: alpha(opacity=95);
    opacity: 0.85; /* For IE8 and earlier */
    border: 1px solid #efefef;
    background: #fff;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
}

Can you post the HTML you're applying the CSS to and a jsFiddle is possible? — j08691, Aug 04 '12 at 15:19
@AnkitGautam It seems like either it's necessary enough or unintuitive enough in CSS that people always want to ask this. — Jerry Saravia, Aug 04 '12 at 15:31

score 1 · Answer 1 · answered Aug 04 '12 at 15:38

1

Greg,

You could try applying the following to the #contact-box or to the contact-us

#contact-box{
    display: table-cell;
    vertical-align: center;
}

Have a look on jsFiddle here.

Example - click here

answered Aug 04 '12 at 15:38

Jerry Saravia

3,737
3
24
39

This is it. @Greg, since all divs are `display:block` by default and `vertical-align` doesn't work on `display: block` elements, the only thing missing from your CSS was the `display: table-cell` part. – Marcelo De Polli Aug 04 '12 at 15:43

RobertO · Accepted Answer · 2012-08-04T17:53:32.143

0

add position: relative; to #contact-us and position: absolute; top: 50%; left: 50%; margin-top: -60px; margin-left: -150px; to #contact-box

http://jsfiddle.net/THWMe/1/

edited Aug 04 '12 at 17:53

answered Aug 04 '12 at 17:46

RobertO

2,655
1
20
18

Thanks atlavis, seems to be working great. However just realized (but it makes sense) that the box is vertically aligned in the middle of my 1300px height div. Is there a way to center it to the height of the screen instead? – Greg Aug 04 '12 at 21:59
then change to `position: fixed;` for `#contact-box`. http://jsfiddle.net/THWMe/2/ – RobertO Aug 04 '12 at 22:01
Thanks a lot. Now have another prob... If I do this the contact-box stays on top of all my divs (this is a one page scroll with several div see here http://goo.gl/V9I76). Is there a way to restrict the fixed position to the contact div? – Greg Aug 05 '12 at 14:07

Vertical center of a div not working

2 Answers2