Flexbox在IE中不垂直居中
我有一个简单的网页与一些Lipsum的内容，是在页面的中心。该页面在Chrome和Firefox中运行良好。如果我减小窗口的大小，内容会填满窗口，直到它不能填充为止，然后添加一个滚动条，并向屏幕底部填充屏幕外的内容。
但是，页面并不以IE11居中。我可以通过调整页面的正文使页面在IE中居中，但是如果我这样做了，那么内容就会开始离开屏幕朝向顶部，并切断内容的顶部。
下面是两个场景。请参阅相关的Fiddles。如果问题不明显，请减小结果窗口的大小，以便强制生成滚动条。
注意:这个应用程序只针对最新版本的火狐、Chrome和IE (IE11)，它们都支持Candidate Recommendation of Flexbox，所以功能兼容性(理论上)应该不是问题。
CSS编辑：当使用Fullscreen API全屏显示外部div时，所有浏览器都会正确地使用原始居中。但是，在离开全屏模式时，IE将恢复为水平居中和垂直顶部对齐。
编辑：IE11使用非供应商特定的Flexbox实现。Flexible box ("Flexbox") layout updates
在Chrome/FF中正确居中和调整大小，在IE11中不居中但正确调整大小
小提琴：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%;
}回答 10
Stack Overflow用户
发布于 2014-08-19 22:39:04
我发现，当只设置了最小高度样式或高度样式完全缺失时，ie浏览器在垂直对齐内部容器时存在问题。我所做的是添加一些有价值的高度样式，这为我解决了这个问题。
例如：
.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;
}所以现在我们有了高度样式，但是最小高度将覆盖它。这样就很高兴了，而且我们仍然可以使用min-height。
希望这对某些人有帮助。
Stack Overflow用户
发布于 2015-10-20 03:54:10
尝试将您使用flex-direction: column进行了弹性装箱的任何div包装在一个也经过弹性装箱的容器中。
我刚刚在IE11中测试了这一点，它可以正常工作。一个奇怪的修复，但在微软内部修复外部错误之前...它将不得不这样做！
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中测试的两个示例：http://codepen.io/philipwalton/pen/JdvdJE http://codepen.io/chriswrightdesign/pen/emQNGZ/
Stack Overflow用户
发布于 2019-02-21 06:16:21
以下是我的工作解决方案(SCSS)：
.item{
display: flex;
justify-content: space-between;
align-items: center;
min-height: 120px;
&:after{
content:'';
min-height:inherit;
font-size:0;
}
}https://stackoverflow.com/questions/19371626
复制相似问题