Flexbox não centralizado verticalmente no IE

116

Eu tenho uma página da web simples com algum conteúdo Lipsum centralizado na página. A página funciona bem no Chrome e Firefox. Se eu reduzir o tamanho da janela, o conteúdo preenche a janela até que não possa mais e, em seguida, adiciona uma barra de rolagem e preenche o conteúdo fora da tela, na parte inferior.

No entanto, a página não é centralizada no IE11. Posso centralizar a página no IE flexionando o corpo, mas, se o fizer, o conteúdo começará a sair da tela em direção à parte superior e cortar a parte superior do conteúdo.

Abaixo estão os dois cenários. Veja os Fiddles associados. Se o problema não for evidente de imediato, reduza o tamanho da janela de resultados para que seja forçada a gerar uma barra de rolagem.

Nota: Este aplicativo destina-se apenas às versões mais recentes do Firefox, Chrome e IE (IE11), todos com suporte para a Recomendação Candidata do Flexbox , portanto, a compatibilidade de recursos não deve ser um problema (em teoria).

Editar : ao usar a API Fullscreen para exibir em tela cheia o div externo, todos os navegadores centralizam corretamente o CSS original. No entanto, ao sair do modo de tela inteira, o IE volta a ser centralizado horizontalmente e alinhado verticalmente no topo.

Editar : o IE11 usa implementação não específica do fornecedor do Flexbox. Atualizações de layout de caixa flexível ("Flexbox")


Centraliza e redimensiona corretamente no Chrome / FF, não centraliza, mas redimensiona corretamente no IE11

Fiddle: 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%;
}

Centra corretamente em todos os lugares, corta o topo quando dimensionado para baixo

Fiddle: 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%;
}
Dragonseer
fonte
Não tenho acesso ao IE11 no momento, você tentou esta solução: stackoverflow.com/questions/16122341/… ?
cimmanon
margem: auto não parece ter feito diferença.
Dragonseer de
Por favor, relate o bug da Microsoft, pelo menos eles terão um bug a menos no lançamento oficial, já que sempre o IE terá algo (muitos bugs exclusivos) para lidar com ..
MarmiK
você precisa usar -ms-flexboxpara o IE ..
avrahamcool
O IE11 usa o padrão atual de exibição do Flexbox: flex. msdn.microsoft.com/en-us/library/ie/dn265027(v=vs.85).aspx . Tentei mesmo assim e não fez diferença; o conteúdo ainda está alinhado no topo. Além disso, observe minha edição na pergunta original, que afirma que o div externo centra-se corretamente quando está em tela cheia, mas é alinhado na parte superior quando fora da tela cheia.
Dragonseer de

Respostas:

225

Eu descobri que o navegador tem problemas para alinhar verticalmente os contêineres internos, quando apenas o estilo de altura mínima está definido ou quando o estilo de altura está ausente. O que fiz foi adicionar estilo de altura com algum valor e isso resolver o problema para mim.

por exemplo :

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

Portanto, agora temos o estilo de altura, mas a altura mínima irá substituí-lo. Dessa forma, ou seja, está feliz e ainda podemos usar min-height.

Espero que isso seja útil para alguém.

Kaloyan Stamatov
fonte
9
Não se esqueça -ms-flex-align:center;do IE10. Suporte para align-itemsfoi adicionado apenas no IE11 .
Boaz
Ah! tantos meses depois, isso me salvou - definir uma altura em vez de min-height funcionou.
Pete
@KaloyanStamatov Verifique o autoprefixer e ajude a se livrar desses problemas irritantes entre navegadores.
hitautodestruct
29
Esta solução não funciona quando o conteúdo é maior do que a altura mínima. O min-heightrealmente substitui a heightregra, mas se o conteúdo exceder o, min-heightele simplesmente se estenderá para fora dos limites. A resposta de @ericodes resolve este problema e a solução funciona em todos os navegadores que suportam flex.
lachie_h
2
Para quem vem aqui em ou depois de 2019, a melhor solução de longe é a de @ sergey-fedirko, que não exige nenhum elemento HTML extra e nem alturas rígidas;) Este aqui: stackoverflow.com/a/54796082/134120
AsGoodAsItGets
71

Tente embrulhar qualquer div com o qual você tenha flexboxed flex-direction: columnem um contêiner que também seja flexboxed.

Acabei de testar isso no IE11 e funciona. Uma correção estranha, mas até que a Microsoft faça sua correção de bug interna externa ... terá que servir!

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

2 exemplos para você testar no IE11: http://codepen.io/philipwalton/pen/JdvdJE http://codepen.io/chriswrightdesign/pen/emQNGZ/

ericodes
fonte
1
Você deve postar o código usado para corrigir o problema em sua resposta real, em vez de criar um link para um URL externo. Então, sua resposta continuará a ser útil, mesmo depois que o link acabar.
Kelly Keller-Heikkila
11
Esta é, de longe, a melhor solução para esse bug. Todas as outras respostas sugerem uma altura fixa no container, o que não funciona se o conteúdo for de altura variável. Esta solução permite o uso de em min-heightvez de uma heightregra rígida , enquanto ainda centraliza verticalmente em todos os navegadores que suportam o uso de display: flex.
lachie_h
1
Apenas display:flexé necessário no invólucro, e talvez qualquer um destes na criança: width: 100% flex-basis:100% flex-grow:1dependendo do seu conteúdo / estilo.
fregante
esta solução alternativa não funciona se a propriedade FlexContainerWrapper align-itemsestiver definida. Você tem que envolver o flexbox original com um flexbox sem esta propriedade.
Marcus Krahl
hey @MarcusKrahl! você está dizendo que envolva o flexbox original (FlexContainer) com um flexbox sem uma align-itemspropriedade (FlexContainerWrapper)?
ericodes
10

Aqui está minha solução de trabalho (SCSS):

.item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 120px;
  &:after{
    content:'';
    min-height:inherit;
    font-size:0;
  }
}
Sergey Fedirko
fonte
6

Para o caso de alguém chegar aqui com o mesmo problema que eu tive, que não foi abordado especificamente nos comentários anteriores.

Eu tinha margin: autoo elemento interno que fez com que ele grudasse na parte inferior de seu pai (ou do elemento externo). O que consertou para mim foi mudar a margem para margin: 0 auto;.

Gal Talmor
fonte
5

Este é um bug conhecido que parece ter sido corrigido internamente na 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
fonte
43
Aparentemente, não foi corrigido externamente.
Blazemonger
4
"Este problema parece ter sido corrigido no Microsoft Edge. No momento, não estamos trabalhando em bugs de recursos do Internet Explorer, exceto por questões relacionadas à segurança." Eles fecharam o problema para as versões do IE pré-Edge
David Zulaica
1
A solução parece ser usar height em vez de min-height, se possível.
frodo2975
3

Eu atualizei os dois violinos. Eu espero que isso faça seu trabalho.

centrando

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

centralizar e rolar

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
fonte
Obrigado por sua contribuição. Infelizmente, seu Fiddles não parece funcionar no Chrome ou no IE11. O exemplo de centralização não está mais centralizado no Chrome e o exemplo de centralização e rolagem não está centralizado no IE11 e ainda corta o conteúdo.
Dragonseer
1

Não tenho muita experiência com, Flexboxmas me parece que a altura forçada nas tags htmle bodyfaz com que o texto desapareça no topo quando redimensionado - não consegui testar no IE, mas encontrei o mesmo efeito no Chrome.

Eu bifurquei seu violino e removi as declarações heighte width.

body
{
    margin: 0;
}

Também parecia que as flexconfigurações deveriam ser aplicadas a outros flexelementos. No entanto, aplicando- display: flexse aos .innerproblemas causados, eu defini explicitamente o .innercomo display: blocke o .outercomo flexpara o posicionamento.

Defino a .outeraltura mínima para preencher a janela de visualização display: flex, e defino o alinhamento horizontal e vertical:

.outer
{
    display:flex;
    min-height: 100%;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
}

Eu configurei .innerpara display: blockexplicitamente. No Chrome, parecia que era herdado flexde .outer. Eu também defino a largura:

.inner
{
    display:block;
    width: 80%;
}

Isso corrigiu o problema no Chrome, esperançosamente, ele pode fazer o mesmo no IE11. Esta é minha versão do violino: http://jsfiddle.net/ToddT/5CxAy/21/

Todd
fonte
Obrigado pela sua resposta. A declaração de altura e largura são necessárias para centralizar verticalmente no IE. Sem ele, o conteúdo não é mais centralizado no IE11.
Dragonseer
Mesmo com a altura definida no div externo? Talvez adicionar uma altura mínima ao corpo?
Todd,
1

Encontrou uma boa solução que funcionou para mim, verifique este link https://codepen.io/chriswrightdesign/pen/emQNGZ/?editors=1100 Primeiro, adicionamos um div pai, depois mudamos min-height: 100% para min- altura: 100vh. Ele funciona como um encanto.

// 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
fonte
0

Se você pode definir a largura e altura do pai, há uma maneira mais simples de centralizar a imagem sem ter que criar um contêiner para ela.

Por algum motivo, se você definir a largura mínima, o IE também reconhecerá a largura máxima.

Esta solução funciona para IE10 +, Firefox e 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%;
}

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

Humberto Mendes
fonte