我有一个简单的网页与一些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%;
}
发布于 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。
希望这对某些人有帮助。
发布于 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/
发布于 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
复制相似问题