Question

查看本网站上的其他问题，我使用了一种方法，通过自动边距将所有位置设置为0，但这有一些不必要的行为。

如果垂直调整窗口大小，容器顶部会从页面顶部移开。当它击中顶部时需要停止。

JSFIDDLE：

HTML：

<div id="container">
    <p>This is the container.</p>
    <p>If you resize the JSFiddle window horizontally, you will see that the left edge of the box doesn't move past the left edge of the window. This is correct behaviour.</p>
    <p>Now if you move the window vertically, the top of this container will disappear off of the top of the window. This is wrong.</p>
</div>

CSS：

#container {
    margin:auto;
    height:300px;
    width:300px;
    top:0;
    bottom:0;
    left:0;
    right:0;
    position:absolute;
    border:1px solid;
    padding:10px;
}

Answer 1

我认为这就是你想要的，至少在Chrome中...... http://jsfiddle.net/h6Lh9z0e/4/

略微修改HTML

<div id="container">
    <div id="inner-container">
    <p>This is the container.</p>
    <p>If you resize the JSFiddle window horizontally, you will see that the left edge of the box doesn't move past the left edge of the window. This is correct behaviour.</p>
    <p>Now if you move the window vertically, the top of this container will disappear off of the top of the window. This is wrong.</p>
    </div>
</div>

更多修改后的CSS

#container {
    position:absolute;
    width:100%;
    height:100%;
    background-color:#ff0;
display:flex;
align-items:center;
justify-content:center;
display:-webkit-box;
-webkit-box-align:center;
-webkit-box-pack:center;
display:-ms-flexbox;
-ms-flex-align:center;
-ms-flex-pack:center;

}
    #container #inner-container {
        border:solid 1px black;
        padding:10px;
        width:300px;
        height:300px;
    }

我对IE之类的东西不太确定，但是很长时间没有使用它，但我知道它并不支持webkit。

对不起半答案，但希望它会帮助一些。

编辑：好的，原来你可以添加MS特定的flexbox代码来居中它，但是当你垂直缩小窗口时，你仍会得到同样消失的顶级问题......

编辑2 ：是的，事实证明-ms前缀从IE10开始被折旧（http://msdn.microsoft.com/en-gb/library/ie/hh673531(v=vs.85).aspx），所以看起来你需要放置非前缀也是名字。

Answer 2

这是一种可以满足您需求的方法：http://codepen.io/pageaffairs/pen/spthD

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style type="text/css">

html,body,div,p {
    margin:0;
    padding:0;
}

html, body {
    height:100%;
}

body {
    width:100%;
    display:table;
    background:#00F;
}

#pageWrapper {
    display:table-cell;
    min-height:100%;
    text-align:center;
    vertical-align:middle;
}

#content {
    width:50%;
    min-width:512px;
    margin:0 auto; /* for non display:table browsers */
    padding-top:1em;
    text-align:left;
    background:#DEF;
}

#content p {
    padding:0 1em 1em;
}
</style>

</head>
<body>

<div id="pageWrapper">
    <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

</body>
</html>

Source

Answer 3

设置overflow:auto;使其适用于各种尺寸：

#container {
    margin:auto;
    height:300px;
    width:300px;
    top:0;
    bottom:0;
    left:0;
    right:0;
    position:absolute;
    border:1px solid;
    padding:10px;
    overflow: auto;
}

working fiddle

另一个解决方案就是这样使用：

#container {
    margin:auto;
    height:300px;
    width:300px;
    margin-top: -150px; /* half of the height */
    margin-left: -150px; /* half of the width */
    top:50%;
    left:50%;
    position:absolute;
    border:1px solid;
    padding:10px;
    overflow:auto;
}

demo

中心容器水平和垂直

3 个答案: