0

目标：

  • 当窗口的宽度和高度都很小时，div应该和窗口一样大；

  • 当窗口宽度过大（>max-width）时，div应保持其宽度为max-width，并水平居中。

  • 当窗口高度过大（>max-height）时，div应保持其高度为max-height，并垂直居中。

下面的例子已经实现了一切，除了最后一点。

如何在窗口中垂直居中这个div？即，我希望红色区域表现得像绿色区域，但只是垂直而不是水平。

（此设计是为移动设备屏幕的响应式设计而设计的。如果可能的话，不涉及 JS。）

<!doctype html>
<html>
        <head>
                <style>
                        body,html{
                                height:100%;
                                margin:0px;
                                background:green;
                                }
                        #t1{
                                position:relative;
                                height:100%;
                                max-width:640px;
                                margin:0 auto;
                                background-color:red;
                        }
                        #t1-1{
                                position:absolute;
                                height:100%;
                                max-height:640px;
                                width:100%;
                                background-color:#dddddd;

                                overflow:hidden;/*demo purpose*/
                        }
                        /*the following stuff are for demo only*/
                        img{
                                position:absolute;
                                opacity:0.5;
                        }
                        img.w{
                                width:100%;
                        }
                        img.h{
                                height:100%;
                        }
                </style>
        </head>
        <body>
                <div id="t1">
                        <div id="t1-1">
                                <img class="h" src="http://www.google.com/images/srpr/logo3w.png" />
                                <img class="w" src="http://www.google.com/images/srpr/logo3w.png" />
                        </div>
                </div>
        </body>
</html>

PS 在这个例子中，一些桌面浏览器在内部设置了一个 min-width 值给整个东西（例如 Chrome 中的 400px），使 div 不能保持水平收缩。

4

3 回答 3

1

您可能需要一些 javascript 才能使其工作：

首先，你需要一个<div>元素来布局，所以我称之为mask：

<div id="mask"></div>

然后，设置样式以填充整个文档，并给出一个max-widthand max-height：

<style>
    #mask {
        position: fixed;
        height: 100%;
        max-height: 400px;
        width: 100%;
        max-width: 400px;
        top: 0;
        left: 0;
        background: red;
    }
</style>

这种风格不执行居中工作，所以你需要你的 javascript 来做，我们有一个layoutMask函数来确定 div 是否应该居中：

var mask = document.getElementById('mask');
function layoutMask() {
    // here 400 is the same as the max-width style property
    if (window.innerWidth >= 400) {
        mask.style.left = '50%';
        // to ensure centering, this sould be (max-width / 2)
        mask.style.marginLeft = '-200px';
    }
    else {
        mask.style.left = '';
        mask.style.marginLeft = '';
    }

    // the same as width
    if (window.innerHeight >= 400) {
        mask.style.top = '50%';
        mask.style.marginTop = '-200px';
    }
    else {
        mask.style.top = '';
        mask.style.marginTop = '';
    }
}

最后，将此函数分配给resize事件，并立即执行以确保<div>在第一次加载时正确放置：

if (window.addEventListener) {
    window.addEventListener('resize', layoutMask);
}
else {
    window.attachEvent('onresize', layoutMask);
}
layoutMask();

我在我的 chrome 上试过这个，但我确定它在 IE6 下不起作用，因为 IE6 不支持该position: fixed;样式，但它应该在大多数浏览器中工作。

我制作了一个jsfiddle进行测试。

于 2013-01-29T09:43:37.837 回答
0

你可以添加一个@media查询来实现这个效果

@media (min-height: 640px) {
    #t1-1 {
        top: 50%;
        margin-top: -320px;
    }
}

请参阅JSFiddle进行测试。

于 2013-01-30T00:29:45.013 回答
0

据我所知，height:100%这是不可能的。你需要用<center>它来保持它在水平和垂直的中心。您可能还需要使用边距。喜欢：

margin-top:18%;
margin-left:40%;
于 2013-01-29T09:40:50.127 回答