Question

我正在开发一个网站，并希望将此网站集中在屏幕中心（水平和垂直）但不能。我只能水平居中。

由于我一直在搜索我尝试将它们应用到我的网站时找到的解决方案，所有这些都被破坏了。

这是网站http://amsdarquitetura.com.br/

Answer 1

这就是你需要的：

<style type="text/css">

#global {
    position:absolute;
    width: 700px;
    height: 400px;
    margin-top: -200px; /* half of the height */
    margin-left: -350px; /* half of the width */
    left: 50%;
    top: 50%;

    border: 1px solid #333;
    background-color: pink;
}

</style>

把它放在你的父div上。

Answer 2

水平很容易：

<style type="text/css">
    #wrap {
        margin: 0 auto;
        width: 800px;
    }
</style>

<body>
    <div id="wrap">
      [content]
    </div>
</body>

垂直更加困难，可能需要CSS3或javascript定位。

Answer 3

为了引导您走正确的道路，尝试使用JAVASCRIPT（可能想要添加标签）来检测window.height。

// The window.innerHeight and document.body.clientHeight will make sure it is cross-browser compatible.
function getHeight() {
    return window.innerHeight != null? window.innerHeight: document.body != null? document.body.clientHeight:null;
}

然后减去主div的高度。

var maindiv=500; //this is your total height of main div with content
var windowHeight = getHeight(); 
var displayHeight= windowHeight-maindiv;

然后除以2（上/下）

var topMargin= displayHeight/2;

最后，添加一个＆＃39; margin-top＆＃39;到主要的div。

document.getElementById('wrap').style.marginTop=topMargin;

Answer 4

您必须为整个网站定义高度和宽度，以使其在两个方向都居中。

从那里开始，它只是对你的垂直居中进行数学计算。水平是非常自动的，定义宽度和边距：0 auto; （不要使用5px auto。）。

这是关于垂直居中的一篇不错的文章：

http://blog.themeforest.net/tutorials/vertical-centering-with-css/

Answer 5

有一个jQuery插件可以做到这一点。我看到你已经在主页面上使用了jQuery。

http://www.seodenver.com/simple-vertical-align-plugin-for-jquery/

正如您所发现的那样，用于执行此操作的CSS选项似乎很复杂，不可靠和笨拙。

您可以实现自定义jQuery函数来执行相同的操作。但是，当其他人已经解决了问题时，为什么要保留该代码呢？

中心站点位于屏幕中央

5 个答案: