Flexbox在IE中不垂直居中
我有一个简单的网页，里面有一些以页面为中心的Lipsum内容。 该页面在Chrome和Firefox中正常工作。 如果我减小窗口的大小，内容将填充窗口，直到它不能，然后添加一个滚动条并填充内容离屏幕，底部。
但是，页面不在IE11中。 我可以通过弯曲身体来使页面居中在IE中，但是如果我这样做，则内容开始向屏幕顶部移动，并切断内容的顶部。
以下是两种情况。 见相关的小提琴。 如果问题不是很明显，减小结果窗口的大小，以便强制生成一个滚动条。
注意：此应用程序只针对最新版本的Firefox，Chrome和IE（IE11），它们都支持Flexbox的候选推荐标准 ，所以function兼容性不应该成为问题（理论上）。
编辑 ：当使用Fullscreen API全屏显示外部div时，所有浏览器都使用原始CSS正确居中。 但是，在离开全屏模式后，IE将恢复为水平居中和垂直顶部alignment。
编辑 ：IE11使用非供应商特定实施的Flexbox。 灵活的盒子（“Flexbox”）布局更新
在Chrome / FF中正确resize，不在IE11中正确resize
小提琴： 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%; } 正确地在任何地方居中，在缩小尺寸时切断顶部
小提琴： 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%; }
我发现，即浏览器有问题垂直alignment内部容器，当只有最小高度风格设置或当高度风格是完全没有。 我所做的是增加一些有价值的高度风格，并为我解决这个问题。
例如 ：
.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; }
所以现在我们有高度的风格，但最小高度会覆盖它。 这样即开心，我们仍然可以使用最小高度。
希望这对某人有帮助。
试着用flex-direction: column包装flexbox方式的任何div flex-direction: column也放入flexbox的容器中。
我只是在IE11中testing它，它的工作原理。 一个奇怪的修复，但直到微软使内部错误修复外部…它必须做的！
HTML：
<div class="FlexContainerWrapper"> <div class="FlexContainer"> <div class="FlexItem"> <p>I should be centered.</p> </div> </div> </div>
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%; }
在IE11中testing2个例子： http : //codepen.io/philipwalton/pen/JdvdJE http://codepen.io/chriswrightdesign/pen/emQNGZ/
这是一个已知的错误，似乎已经在Microsoft内部解决。
我已经更新了两个小提琴。 我希望这会使你的工作完成。
定心
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; }
以防万一有人来到我面前，这个问题在以前的评论中没有具体说明。
我对内部元素有margin: auto ，导致它粘在父元素（或外层元素）的底部。 对我来说固定的是把边缘改为margin: 0 auto; 。
我对Flexbox没有多less经验，但是在我看来， html和body标签上的强制高度会导致文本在resize时消失在顶部 – 我无法在IE中进行testing，但是我发现效果相同在Chrome中。
我叉你的小提琴，并删除了height和width声明。
body { margin: 0; }
这似乎也像flex设置必须被应用到其他的flex元素。 但是，将display: flex应用于.inner引发了问题，因此我明确地将.inner设置为display: block ，并将.outer设置为flex以进行定位。
我设置最小的.outer高度来填充视口， display: flex ，并设置水平和垂直alignment：
.outer { display:flex; min-height: 100%; min-height: 100vh; align-items: center; justify-content: center; }
我将.inner设置为显式地display: block 。 在Chrome中，它看起来像从.outerinheritance了flex 。 我也设置宽度：
.inner { display:block; width: 80%; }
这在Chrome中解决了这个问题，希望它能在IE11中做到这一点。 这里是我的小提琴的版本： http : //jsfiddle.net/ToddT/5CxAy/21/
如果您可以定义父级的宽度和高度，则可以更简单地集中图像，而不必为其创build容器。
由于某种原因，如果你定义最小宽度，IE也会识别最大宽度。
此解决scheme适用于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%; }
