水平和垂直居中容器答案

【问题标题】：Center container horizontally and vertically水平和垂直居中容器
【发布时间】：2014-08-21 09:48:45
【问题描述】：

查看此站点上的其他问题，我使用了一种将所有位置设置为 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;
}

【问题讨论】：

似乎答案是使用 CSS 表格。 *.com/questions/17520145/…
如果我理解你的问题，你需要的是一个最小边距顶部，这显然是弥补的，但这个 buildinternet.com/2009/10/purely-css-faking-minimum-margins 可能会有所帮助。
没关系，我忘了vertical-align：中间，我的错。
@Joey 看看 flexbox（align-items 和 justify-content 似乎是您需要的）：css-tricks.com/snippets/css/a-guide-to-flexbox
虽然 flex 可能存在同样的问题。看看这个例子，它仍然做同样的jsfiddle.net/agilius/a9kXU/3

标签： html css

【解决方案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：没错，从 IE10 开始 (http://msdn.microsoft.com/en-gb/library/ie/hh673531(v=vs.85).aspx) 开始贬值 -ms 前缀，所以看起来您还需要输入非前缀名称。

【讨论】：

are wa wa wa..Awesome Dude..I like it
我不知道为什么，但这也不适合我。从这开始，所有这些答案都对我不起作用。
您使用的是哪个浏览器？我假设是 Chrome（因为现在每个人和他的狗似乎都在使用它）
不，等等，我的错，我想我是在 IE 的东西里用鞋拔弄坏了它......如果你把它拿出来，它应该仍然可以工作
现在试试，应该可以按照 Chrome 中的描述工作（尽管 IE 仍然是个问题）

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

【讨论】：

这是我要采用的方法，虽然与此略有不同。

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

【讨论】：