CSS Flexbox 不在 IE 中垂直居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19371626/
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
Flexbox Not Centering Vertically in IE
提问by Dragonseer
I have a simple web page with some Lipsum content that is centered on the page. The page works fine in Chrome and Firefox. If I reduce the size of the window, the content fills the window until it can't and then adds a scroll bar and fills content off screen, toward the bottom.
我有一个简单的网页，其中包含一些以页面为中心的 Lipsum 内容。该页面在 Chrome 和 Firefox 中运行良好。如果我减小窗口的大小，内容会填满窗口，直到不能填满为止，然后添加一个滚动条并在屏幕外向底部填充内容。
However, the page doesn't center in IE11. I can get the page to center in IE by flexing the body, but if I do, then the content starts to go off screen towards the top and cuts off the top of the content.
但是，该页面不在 IE11 中居中。我可以通过弯曲身体让页面在 IE 中居中，但如果我这样做，那么内容开始朝顶部离开屏幕并切断内容的顶部。
Below are the two scenarios. See the associated Fiddles. If the problem isn't evident right away, reduce the size of the result window so that it's forced to generate a scroll bar.
下面是两个场景。请参阅相关的小提琴。如果问题不立即明显，请减小结果窗口的大小，以便强制生成滚动条。
Note: This application only targets the latest versions of Firefox, Chrome and IE (IE11), which all have support for the Candidate Recommendation of Flexbox, so feature compatibility shouldn't be an issue (in theory).
注意：此应用程序仅针对最新版本的 Firefox、Chrome 和 IE (IE11)，它们都支持Flexbox的Candidate Recommendation，因此功能兼容性应该不是问题（理论上）。
Edit: When using the Fullscreen API to fullscreen the outer div, all browsers correctly center using the original CSS. However, upon leaving the fullscreen mode, IE reverts back to being horizontally centered and vertically top aligned.
编辑：当使用 Fullscreen API 全屏显示外部 div 时，所有浏览器都使用原始 CSS 正确居中。但是，在离开全屏模式后，IE 恢复为水平居中和垂直顶部对齐。
Edit: IE11 uses non-vendor specific implementation of Flexbox. Flexible box ("Flexbox") layout updates
编辑：IE11 使用 Flexbox 的非供应商特定实现。弹性盒（“Flexbox”）布局更新
Centers and Resizes Correctly in Chrome/FF, Does Not Center But Resizes Correctly in IE11
在 Chrome/FF 中正确居中和调整大小，在 IE11 中不居中但正确调整大小
Fiddle: http://jsfiddle.net/Dragonseer/3D6vw/
小提琴：http: //jsfiddle.net/Dragonseer/3D6vw/
html, body
{
height: 100%;
width: 100%;
}
body
{
margin: 0;
}
.outer
{
min-width: 100%;
min-height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.inner
{
width: 80%;
}
Centers Correctly in Everywhere, Cuts Off Top When Sized Down
在任何地方正确居中，缩小尺寸时切断顶部
Fiddle: http://jsfiddle.net/Dragonseer/5CxAy/
小提琴：http: //jsfiddle.net/Dragonseer/5CxAy/
html, body
{
height: 100%;
width: 100%;
}
body
{
margin: 0;
display: flex;
}
.outer
{
min-width: 100%;
min-height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.inner
{
width: 80%;
}
回答by Kaloyan Stamatov
I found that ie browser have problem to vertically align inner containers, when only the min-height style is set or when height style is missing at all. What I did was to add height style with some value and that fix the issue for me.
我发现 ie 浏览器在垂直对齐内部容器时有问题，当只设置了 min-height 样式或完全缺少 height 样式时。我所做的是添加具有一定价值的高度样式，并为我解决了这个问题。
for example :
例如 ：
.outer
{
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/* Center vertically */
align-items: center;
/*Center horizontaly */
justify-content: center;
/*Center horizontaly ie */
-ms-flex-pack: center;
min-height: 220px;
height:100px;
}
So now we have height style, but the min-height will overwrite it. That way ie is happy and we still can use min-height.
所以现在我们有了高度样式，但是 min-height 会覆盖它。这样 ie 很高兴，我们仍然可以使用 min-height。
Hope this is helpful for someone.
希望这对某人有帮助。
回答by ericodes
Try wrapping whatever div you have flexboxed with flex-direction: columnin a container that is also flexboxed.
尝试将您使用 flexboxed 的任何 div 包装flex-direction: column在一个也是 flexboxed 的容器中。
I just tested this in IE11 and it works. An odd fix, but until Microsoft makes their internal bug fix external...it'll have to do!
我刚刚在 IE11 中测试了它并且它有效。一个奇怪的修复，但直到微软将他们的内部错误修复外部......它必须这样做！
HTML:
HTML：
<div class="FlexContainerWrapper">
<div class="FlexContainer">
<div class="FlexItem">
<p>I should be centered.</p>
</div>
</div>
</div>
CSS:
CSS：
html, body {
height: 100%;
}
.FlexContainerWrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.FlexContainer {
align-items: center;
background: hsla(0,0%,0%,.1);
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100%;
width: 600px;
}
.FlexItem {
background: hsla(0,0%,0%,.1);
box-sizing: border-box;
max-width: 100%;
}
2 examples for you to test in IE11: http://codepen.io/philipwalton/pen/JdvdJEhttp://codepen.io/chriswrightdesign/pen/emQNGZ/
2 个示例供您在 IE11 中进行测试：http: //codepen.io/philipwalton/pen/JdvdJE http://codepen.io/chriswrightdesign/pen/emQNGZ/
回答by Sergey Fedirko
Here is my working solution (SCSS):
这是我的工作解决方案（SCSS）：
.item{
display: flex;
justify-content: space-between;
align-items: center;
min-height: 120px;
&:after{
content:'';
min-height:inherit;
font-size:0;
}
}
回答by Gal Talmor
Just in case someone gets here with the same issue I had, which is not specifically addressed in previous comments.
以防万一有人遇到我遇到的同样问题，这在之前的评论中没有具体解决。
I had margin: autoon the inner element which caused it to stick to the bottom of it's parent (or the outer element).
What fixed it for me was changing the margin to margin: 0 auto;.
我margin: auto在内部元素上导致它粘在它的父元素（或外部元素）的底部。对我来说修复它的是将边距更改为margin: 0 auto;.
回答by David Zulaica
This is a known bug that appears to have been fixed internally at Microsoft.
这是一个已知错误，似乎已在 Microsoft 内部修复。
回答by Umar Khan
i have updated both fiddles. i hope it will make your work done.
我已经更新了两个小提琴。我希望它能完成你的工作。
html, body
{
height: 100%;
width: 100%;
}
body
{
margin: 0;
}
.outer
{
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.inner
{
width: 80%;
margin: 0 auto;
}
html, body
{
height: 100%;
width: 100%;
}
body
{
margin: 0;
display:flex;
}
.outer
{
min-width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.inner
{
width: 80%;
margin-top:40px;
margin: 0 auto;
}
回答by Yaroslav Chapelskyi
The original answer from https://github.com/philipwalton/flexbugs/issues/231#issuecomment-362790042
来自https://github.com/philipwalton/flexbugs/issues/231#issuecomment-362790042的原始答案
.flex-container{
min-height:100px;
display:flex;
align-items:center;
}
.flex-container:after{
content:'';
min-height:inherit;
font-size:0;
}
回答by Todd
I don't have much experience with Flexboxbut it seems to me that the forced height on the htmland bodytags cause the text to disappear on top when resized-- I wasn't able to test in IE but I found the same effect in Chrome.
我没有太多经验，Flexbox但在我看来，html和body标签上的强制高度会导致文本在调整大小时消失在顶部——我无法在 IE 中进行测试，但我在 Chrome 中发现了相同的效果。
I forked your fiddle and removed the heightand widthdeclarations.
我分叉了你的小提琴并删除了height和width声明。
body
{
margin: 0;
}
It also seemed like the flexsettings must be applied to other flexelements. However, applying display: flexto the .innercaused issues so I explicitly set the .innerto display: blockand set the .outerto flexfor positioning.
似乎这些flex设置也必须应用于其他flex元素。然而，应用display: flex到.inner引起问题，所以我明确设置.inner到display: block并设置.outer于flex定位。
I set the minimum .outerheight to fill the viewport, the display: flex, and set the horizontal and vertical alignment:
我设置了.outer填充视口的最小高度display: flex，并设置了水平和垂直对齐方式：
.outer
{
display:flex;
min-height: 100%;
min-height: 100vh;
align-items: center;
justify-content: center;
}
I set .innerto display: blockexplicitly. In Chrome, it looked like it inherited flexfrom .outer. I also set the width:
我设置.inner为display: block明确。在 Chrome 中，它看起来像是flex从.outer. 我还设置了宽度：
.inner
{
display:block;
width: 80%;
}
This fixed the issue in Chrome, hopefully it might do the same in IE11. Here's my version of the fiddle: http://jsfiddle.net/ToddT/5CxAy/21/
这解决了 Chrome 中的问题，希望它可以在 IE11 中做同样的事情。这是我的小提琴版本：http: //jsfiddle.net/ToddT/5CxAy/21/
回答by Avirtum
Found a good solution what worked for me, check this link https://codepen.io/chriswrightdesign/pen/emQNGZ/?editors=1100First, we add a parent div, second we change min-height:100% to min-height:100vh. It works like a charm.
找到了一个对我有用的好解决方案，请查看此链接https://codepen.io/chriswrightdesign/pen/emQNGZ/?editors=1100首先，我们添加一个父 div，其次我们将 min-height:100% 更改为 min-高度：100vh。它就像一个魅力。
// by having a parent with flex-direction:row,
// the min-height bug in IE doesn't stick around.
.flashy-content-outer {
display:flex;
flex-direction:row;
}
.flashy-content-inner {
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
min-width:100vw;
min-height:100vh;
padding:20px;
box-sizing:border-box;
}
.flashy-content {
display:inline-block;
padding:15px;
background:#fff;
}
回答by Humberto Mendes
If you can define the parent's width and height, there's a simpler way to centralize the image without having to create a container for it.
如果您可以定义父级的宽度和高度，则有一种更简单的方法可以集中图像而无需为其创建容器。
For some reason, if you define the min-width, IE will recognize max-width as well.
出于某种原因，如果您定义了 min-width，IE 也会识别 max-width。
This solution works for IE10+, Firefox and Chrome.
此解决方案适用于 IE10+、Firefox 和 Chrome。
<div>
<img src="http://placehold.it/350x150"/>
</div>
div {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
border: 1px solid orange;
width: 100px;
height: 100px;
}
img{
min-width: 10%;
max-width: 100%;
min-height: 10%;
max-height: 100%;
}
