文章/答案/技术大牛

发布

社区首页 >问答首页 >全屏，居中内容

问全屏，居中内容
EN

Stack Overflow用户

提问于 2014-09-19 13:25:14

回答 2查看 571关注 0票数 1

我已经建立了一个网站的内容区域的固定宽度和可变高度，水平和垂直中心，基于css和html在this answer中找到。

这在我测试过的所有浏览器中都很好，甚至在IE (11)中也是如此。但是，页面也需要在全屏模式下工作，如果我在ie中运行它，内容会转到左上角。

这是我的html：

div.wrapper-1 {
 display: table;
 position: absolute;
 height: 100%;
 width: 100%;
}

div.wrapper-2 {
 display: table-cell;
 vertical-align: middle;
}

div.wrapper-3 {
  margin: 0px auto;
  width: u($page-width);
}

<body>
    <div class="wrapper-1">
        <div class="wrapper-2">
            <div class="wrapper-3">
            <!-- does all my content go -->
            </div>
        </div>
    </div>
</body>

我能做些什么才能让它在全屏上发挥作用呢？

谢谢你帮忙！

html

css

internet-explorer

fullscreen

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-09-19 15:16:32

最后，在挖了一遍之后，我就可以把它拿起来跑了！

我将它添加到我的css中：

html {
    width: 100%;
    height: 100%;
}

票数 2

Stack Overflow用户

发布于 2014-09-19 13:44:26

在您的div.wrapper2和3设置一个立场:相对；这将保持相对于您的div.wrapper1，并应解决该问题。这也可以在你链接的答案的第二部分找到。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/25935067

复制

相似问题

问全屏，居中内容
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问全屏，居中内容EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问全屏，居中内容
EN