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

在我的网站上http://goo.gl/16XdA页面“联系我们”我希望接触盒在容器div“联系我们”内垂直对齐。问题是，使用当前代码，联系人框会在“联系我们”div的1400px高度中间对齐。无论屏幕分辨率是多少，是否有办法将触点盒对准屏幕中央？（或把100％的高度为接触美国格，但没有工作）单页网站和垂直对齐在一个div中

#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; 
}

来源

2012-08-06 Greg

更改高度#contact-us到100%，以及它的父元素（html和body），并删除其填充：

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

#contact-us { 
    padding: 0; 
}

来源

2012-08-06 18:01:29

谢谢！工作很好。将所有#div的高度都设置为100％是否合理？在基于我建立我的网站的教程中，他们建议使用超过1200像素的高度。但是现在我正在考虑这个问题，所有的时候都使用100％更合理，对吗？ – Greg 2012-08-06 18:25:03

我会尽量让它达到100％的高度，但如果该部分的内容多于浏览器的高度（在用户的屏幕特别小的情况下），它应该能够扩展。也许'min-height'？ – 2012-08-06 18:31:30

我在你们的网站看了看对铬它是在＃中心接触我们。然而，联系我们是1650像素高，因为您添加了250像素填充，因此div位于1400框的中心，但250像素被添加到顶部位置。

您可以通过将框的大小更改为边框或增加边距来解决此问题。

来源

2012-08-06 17:54:36 Niels

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

回答

相关问题