CSS 在 IE11 和 IE10 中与 flexbox 垂直对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27748473/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
vertical align with flexbox in IE11 and IE10
提问by clarkk
How to make a cross browser solution where an element is vertical aligned?
如何制作元素垂直对齐的跨浏览器解决方案？
http://jsfiddle.net/e2yuqtdt/3/
http://jsfiddle.net/e2yuqtdt/3/
This works in both Firefox and Chrome, but not in IE11
这适用于 Firefox 和 Chrome，但不适用于 IE11
<div class="page_login">
<div>vertical-align:center; text-align:center</div>
</div>
html, body {
height:100%;
}
.page_login {
display:flex;
height:100%;
width:100%;
background:#303030;
}
.page_login > div {
margin:auto;
background:#fff;
min-height:100px;
width:200px;
}
update
更新
When the centered element is higher than the viewport height the background is only 100% and not 100% scroll height
当居中元素高于视口高度时，背景仅为 100% 而不是 100% 滚动高度
http://jsfiddle.net/e2yuqtdt/8/
http://jsfiddle.net/e2yuqtdt/8/
html, body {
min-height:100%;
height:100%;
}
.page_login {
display:flex;
min-height:100%;
height:100%;
width:100%;
background:#303030;
}
.page_login > div {
margin:auto;
background:#fff;
height:800px;
width:200px;
}
采纳答案by elad.chen
How to make a cross browser solution where an element is vertical aligned?
如何制作元素垂直对齐的跨浏览器解决方案？
Take a look at this fiddle: http://jsfiddle.net/5ry8vqkL/
看看这个小提琴：http: //jsfiddle.net/5ry8vqkL/
The technique applied there is using the "display: table". Here is an article for an in-depth view of the approach http://css-tricks.com/centering-in-the-unknown/
在那里应用的技术是使用“显示：表格”。这是一篇深入了解该方法的文章http://css-tricks.com/centering-in-the-unknown/
Supported browsers can be seen here: http://caniuse.com/#search=table-cell
可以在此处查看支持的浏览器：http: //caniuse.com/#search=table-cell
HTML:
HTML：
<div class="container">
<div id="page-login">
<div class="panel">Some content</div>
</div>
</div>
CSS:
CSS：
html, body {
min-height:100%;
height:100%;
}
.container {
display: table;
height:100%;
width:100%;
background:#303030;
}
#page-login {
display: table-cell;
vertical-align: middle
}
.panel {
height: 100px;
background-color: #fff;
}
回答by CalvT
You need to add a height to the div. As you have only specified a minimum height, IE automatically expands it to the max possible. So add a height, like this:
您需要为 div 添加高度。由于您只指定了最小高度，IE 会自动将其扩展到最大可能。所以添加一个高度，像这样：
.page_login > div {
margin:auto;
background:#fff;
min-height:100px;
width:200px;
height:200px;
}
http://jsfiddle.net/e2yuqtdt/6/
http://jsfiddle.net/e2yuqtdt/6/
As this is a flex box, and therefore meant to flex, a good idea could be to make the height a percentage. So the div height would be - for example - 50% of the page height, unless the page was less than 200px high - then it would be 100px high.
由于这是一个 flex 框，因此意味着可以弯曲，一个好主意可能是将高度设为百分比。因此，div 高度将是 - 例如 - 页面高度的 50%，除非页面高度小于 200 像素 - 那么它将是 100 像素高。
Update: Unfortunatly it is not possible to make the div fill the whole page with only CSS. However it seems it is possible with Javascript, see here Make a div fill the height of the remaining screen space
更新：不幸的是，仅使用 CSS 无法让 div 填充整个页面。但是似乎可以使用 Javascript，请参阅此处使 div 填充剩余屏幕空间的高度
Actually - have achived it using tablesdivs
实际上 - 已经使用 桌子div
http://jsfiddle.net/e2yuqtdt/14/
http://jsfiddle.net/e2yuqtdt/14/
<div>
<div id="div1">
<div id="div2">vertical-align:center; text-align:center</div>
</div>
</div>
#div1 {
display:flex;
height:100%;
width:100%;
background:#303030;
}
#div2 {
margin:auto;
background:#fff;
height:800px;
width:200px;
}
I know this update is coming after the one by elad.chen - but had already done this and posted it in the comment below - just hadn't got round to updating the question.
我知道此更新是在 elad.chen 发布的更新之后发布的 - 但已经完成此更新并将其发布在下面的评论中 - 只是没有时间更新问题。
