中心容器水平和垂直

Question

Looking over other question on this site, I used a method of setting all the positions to 0 with auto margins, but this has some unwanted behavior. 通过查看本网站上的其他问题，我使用了一种方法，通过自动边距将所有位置设置为0，但这有一些不需要的行为。

If you resize the window vertically, the top of the container moves off of the top of the page. 如果垂直调整窗口大小，容器顶部会从页面顶部移开。 It needs to stop when it hits the top. 当它击中顶部时需要停止。

JSFIDDLE: 的jsfiddle：

http://jsfiddle.net/jd67ca5y/ http://jsfiddle.net/jd67ca5y/

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

I think this is what you want, in Chrome at least... http://jsfiddle.net/h6Lh9z0e/4/ 我想这就是你想要的，至少在Chrome中...... http://jsfiddle.net/h6Lh9z0e/4/

Slightly modified HTML 稍微修改过的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>

More modified CSS 更多修改过的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;
    }

I'm not sure about things like IE though, haven't had to work with that for a long time, but I know it doesn't support webkit. 我不确定IE之类的东西，但是很长一段时间都没有用过，但我知道它不支持webkit。

Sorry for the half answer, but hopefully it'll help some. 对不起半答案，但希望它能帮助一些。

EDIT : Ok, so turns out you can add in MS specific flexbox code to center it, but you still get the same disappearing top issue when you shrink the window vertically... 编辑：好的，所以事实证明你可以添加MS特定的flexbox代码来集中它，但是当你垂直缩小窗口时，你仍然会得到同样的消失顶级问题...

EDIT 2 : Right, turns out that the -ms prefix is being depreciated from IE10 onwards ( http://msdn.microsoft.com/en-gb/library/ie/hh673531(v=vs.85).aspx ), so looks like you'll need to put non-prefixed names as well. 编辑2 ：是的，事实证明-ms前缀从IE10开始被折旧（ http://msdn.microsoft.com/en-gb/library/ie/hh673531(v=vs.85).aspx ),所以看起来你也需要放置非前缀的名字。

Answer 2

Here's a method that does what you want: http://codepen.io/pageaffairs/pen/spthD 这是一个做你想要的方法： 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

Set overflow:auto; 设置overflow:auto; to make it work in every size: 使其适用于各种尺寸：

#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 工作小提琴

Another solution is to use like this: 另一种解决方案是使用这样的：

#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 个解决方案

解决方案1
2 已采纳 2014-08-21 10:09:32

解决方案2
1 2014-08-21 11:14:07

解决方案3
0 2014-08-21 09:52:46

中心容器水平和垂直

问题描述

3 个解决方案

解决方案1 2 已采纳 2014-08-21 10:09:32

解决方案2 1 2014-08-21 11:14:07

解决方案3 0 2014-08-21 09:52:46

解决方案1
2 已采纳 2014-08-21 10:09:32

解决方案2
1 2014-08-21 11:14:07

解决方案3
0 2014-08-21 09:52:46