垂直对齐的格 [英] Vertical Aligned Div

问题描述

无论用户的屏幕分辨率或窗口大小如何，这里的任何人都知道如何使div垂直进入页面中心吗？例如，Instagram的登录页面。如果您缩小窗口，则div会一直浮动在中心位置，直到到达顶部为止。我做到了，但是问题是当用户继续缩小窗口时，div实际上不在用户窗口的顶部（顶部）。

Does anyone in here knows how to make a div go to the center of the page (vertically) no matter the screen resolution or window size of the user? As an example, the login page of Instagram. If you make your window smaller, the div will keep floating at the center until it gets to the top. I made that, but the problem was that when the user kept making the window smaller, the div was actually going out of the user window (to the top).

这里是示例的Instagram登录页面：
https://instagram.com/accounts/login/

Here is the Instagram login page for the example: https://instagram.com/accounts/login/

这是另一个示例的页面：
http://www.farespr.com

And here is my page for the other example: http://www.farespr.com

希望得到一个答案=）

编辑：这是我的主要div代码：

This is my main div code:

#wrapper2{
    width: 960px;
    height: 530px;
    top: 50%;
    margin-top: -280px;
    margin-right: auto;
    margin-left: auto;
    position: fixed;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #dcdcdc;
    box-shadow: 0px 0px 5px 3px #f0f0f0;
    background: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#efefef));
    background: -moz-linear-gradient(top,  #fafafa,  #efefef);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#efefef');
}

推荐答案

这适用于任何大小div。

This will work for any size div.

演示： http：// jsfiddle。 net / BxLhz /

demo: http://jsfiddle.net/BxLhz/

HTML：

<div></div>

CSS：

div {
    width: 100px;
    height: 100px;
    background-color: #cc333;

    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;

    margin: auto;
}

更新：

演示： http://jsfiddle.net/Ha4PU/

demo: http://jsfiddle.net/Ha4PU/

CSS：

#wrapper {
    width: 200px;
    height: 200px;
    background-color: #ccc333;

    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;

    margin: auto;
}

@media only screen and (max-height : 200px) {
    #wrapper {
        position: relative;
    }
}

其中最大高度 = .wrapper

这篇关于垂直对齐的格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！