当前位置：文江博客话题详情

中心站点位于屏幕中央

发布于 2024-11-07 16:25:48 字数 206 浏览 7 评论 0原文

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

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

忆依然 2024-11-14 16:25:48

这就是您所需要的：

<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 上。

This is what you need:

<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>

Put this on your parent div.

回复收藏 0 原文

唱一曲作罢 2024-11-14 16:25:48

为了引导您走上正确的道路，请尝试使用 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;

最后，向主 div 添加“margin-top”。

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

To lead you down the right path, try using JAVASCRIPT (might want to add a tag) to detect the 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;
}

Then subtract the height of your main div.

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

Then divide by 2 (top/bottom)

var topMargin= displayHeight/2;

And finally, add a 'margin-top' to the main div.

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

回复收藏 0 原文

不寐倦长更 2024-11-14 16:25:48

水平很容易：

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

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

垂直则困难得多，并且可能需要 CSS3 或 javascript 定位。

Horizontal is easy:

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

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

Vertical is much more difficult, and will likely require CSS3 or javascript positioning.

回复收藏 0 原文