html flex上下居中,css - Flexbox不在IE中垂直居中

css - Flexbox不在IE中垂直居中

我有一个简单的网页，其中包含一些以页面为中心的Lipsum内容。 该页面在Chrome和Firefox中运行良好。 如果我缩小窗口的大小，内容将填充窗口，直到它不能，然后添加滚动条并将内容从屏幕填充到底部。

但是，该页面不在IE11中。 我可以通过弯曲身体让页面在IE中居中，但是如果我这样做，那么内容开始从屏幕上移到顶部并切断内容的顶部。

以下是两种情况。 查看相关的小提琴。 如果问题不明显，请减小结果窗口的大小，以便强制生成滚动条。

注意：此应用程序仅针对最新版本的Firefox，Chrome和IE(IE11)，它们都支持Flexbox的候选推荐标准，因此功能兼容性不应成为问题(理论上)。

编辑：使用全屏API全屏显示外部div时，所有浏览器都使用原始CSS正确居中。 但是，在离开全屏模式时，IE将恢复为水平居中和垂直顶部对齐。

编辑：IE11使用非供应商特定的Flexbox实现。 灵活的框(“Flexbox”)布局更新

在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%;

}

9个解决方案

191 votes

我发现浏览器在垂直对齐内部容器时有问题，只设置了最小高度样式或者根本没有高度样式。 我所做的是添加具有一定价值的高度风格，并为我解决问题。

例如 ：

.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;

}

所以现在我们有高度风格，但是最小高度会覆盖它。 那种方式即很高兴，我们仍然可以使用最小高度。

希望这对某人有帮助。

Kaloyan Stamatov answered 2019-07-21T18:48:31Z

54 votes

尝试使用flex-direction: column在一个也是flexboxed的容器中包装你的flexboxed div。

我刚刚在IE11中对此进行了测试，它确实有效。 一个奇怪的修复，但直到微软将其内部错误修复为外部......它必须要做！

HTML：

I should be centered.

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中测试的2个示例：[http://codepen.io/philipwalton/pen/JdvdJE][http://codepen.io/chriswrightdesign/pen/emQNGZ/]

ericodes answered 2019-07-21T18:49:12Z

5 votes

这是一个已知的错误，似乎已在Microsoft内部修复。

[https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview]

David Zulaica answered 2019-07-21T18:49:42Z

5 votes

以防有人带着我遇到的同样问题来到这里，这在以前的评论中没有具体说明。

我在内部元素上有margin: auto，这导致它粘在它的父元素(或外部元素)的底部。修正它的原因是将保证金更改为margin: 0 auto;。

Gal Talmor answered 2019-07-21T18:50:13Z

3 votes

这是我的工作解决方案(SCSS)：

.item{

display: flex;

justify-content: space-between;

align-items: center;

min-height: 120px;

&:after{

content:'';

min-height:inherit;

font-size:0;

}

}

Sergey Fedirko answered 2019-07-21T18:50:37Z

2 votes

我更新了两个小提琴。 我希望它能让你的工作完成。

定心

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;

}

Umar Khan answered 2019-07-21T18:51:14Z

1 votes

我对.inner没有多少经验，但在我看来，display: block和flex标签上的强制高度导致文本在调整大小时消失在顶部 - 我无法在IE中测试但我发现了相同的效果 在Chrome中。

我分叉你的小提琴并删除了.inner和display: block声明。

body

{

margin: 0;

}

似乎.inner设置似乎必须应用于其他display: block元素。 但是，将244607429966980813应用于.outer会导致出现问题，因此我明确将.inner设置为display: block，并将.outer设置为flex进行定位。

我设置最小.inner高度来填充视口display: block，并设置水平和垂直对齐：

.outer

{

display:flex;

min-height: 100%;

min-height: 100vh;

align-items: center;

justify-content: center;

}

我明确地将.inner设置为display: block。 在Chrome中，它看起来像是从.outer继承flex.我还设置了宽度：

.inner

{

display:block;

width: 80%;

}

这解决了Chrome中的问题，希望它可能在IE11中也是如此。 这是我的小提琴版本：[http://jsfiddle.net/ToddT/5CxAy/21/]

Todd answered 2019-07-21T18:52:18Z

1 votes

找到了一个对我有用的好解决方案，请查看此链接[https://codepen.io/chriswrightdesign/pen/emQNGZ/?editors=1100]首先，我们添加一个父div，第二个我们改变min-height：100％到min-height：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;

}

Avirtum answered 2019-07-21T18:52:45Z

0 votes

如果您可以定义父级的宽度和高度，则可以使用更简单的方法集中图像，而无需为其创建容器。

出于某种原因，如果您定义最小宽度，IE也将识别最大宽度。

此解决方案适用于IE10 +，Firefox和Chrome。

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%;

}

[https://jsfiddle.net/HumbertoMendes/t13dzsmn/]

Humberto Mendes answered 2019-07-21T18:53:32Z