Question

可能重复：
How to align a <div> to the middle of the page

我正试图在div“contact-us”中水平和垂直地将我的div“联系人框”对中。它水平但不垂直，任何想法为什么？ 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;
}

Answer 1

格雷格，

您可以尝试将以下内容应用于#contact-box或联系我们

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

在这里查看jsFiddle。

Example - click here

Answer 2

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

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

div的垂直中心不工作

2 个答案: