0

可能重复：
如何将 <div> 对齐到页面中间

我正在尝试将我的 div“contact-box”水平和垂直居中在 div“contact-us”中。它水平工作但不是垂直工作，知道为什么吗？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;
}
4

2 回答 2

1

格雷格，

您可以尝试将以下内容应用于#contact-box 或contact-us

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

在这里查看 jsFiddle。

示例 - 单击此处

于 2012-08-04T15:38:06.910 回答
0

添加position: relative;到#contact-us和position: absolute; top: 50%; left: 50%; margin-top: -60px; margin-left: -150px;到#contact-box

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

于 2012-08-04T17:46:41.993 回答