Question

在我的网站http://goo.gl/16XdA页面＆＃34;与我们联系＆＃34;我希望联系人框在容器div内垂直对齐，然后联系我们＆＃34;。问题是，使用当前代码，联系人框在1400px高度的中间对齐＆＃34;联系我们＆＃34; DIV。无论屏幕分辨率是多少，有没有办法将接触盒对准屏幕中间？（或者为联系我们div设置100％的高度，但这不起作用）

#contact-us {
    height: 1400px;
    background: #8aba56;
    padding-top: 250px;
    position: relative;
    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;
    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 dotted #666;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -60px;
    margin-left: -150px;
}

Answer 1

我在Chrome上查看了您的网站，它位于#contact-us的中心。然而，contact-us的高度为1650像素，因为您添加了250 px填充，因此div位于1400框的中心，但250 px正被添加到顶部位置。

您可以通过将box-sizing更改为border-box或增加margin-top来解决此问题。

Answer 2

将#contact-us的高度更改为100%，及其父元素（html和正文），并删除其填充：

html, body, #contact-us {
    height: 100%;
}

#contact-us {
    padding: 0;
}

单页网站和垂直对齐仅在一个div中

2 个答案: