FlexboxがIEで垂直方向に中央揃えにならない

ページを中心としたいくつかのLipsumコンテンツを含むシンプルなWebページがあります。このページはChromeとFirefoxで正常に動作します。ウィンドウのサイズを小さくすると、コンテンツはウィンドウがいっぱいになるまでいっぱいになり、スクロールバーを追加して画面の下部に向かってコンテンツをいっぱいにします。

ただし、ページはIE11の中央に配置されません。ボディをフレックスすることでページをIEの中央に配置できますが、そうすると、コンテンツが画面の上部に向かって移動し始め、コンテンツの上部が切り取られます。

以下は2つのシナリオです。関連するフィドルを参照してください。問題がすぐに明らかでない場合は、結果ウィンドウのサイズを小さくして、強制的にスクロールバーを生成するようにします。

注：このアプリケーションは、Firefox、Chrome、IE（IE11）の最新バージョンのみを対象としています。これらはすべて、FlexboxのCandidate Recommendationをサポートしているため、機能の互換性は（理論的には）問題になりません。

編集：Fullscreen APIを使用して外側のdivを全画面表示すると、すべてのブラウザーは元のCSSを使用して正しく中央に配置されます。ただし、フルスクリーンモードを終了すると、IEは水平方向に中央揃えになり、垂直方向に上揃えに戻ります。

編集：IE11はベンダー固有でない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%;
}

つまり、min-heightスタイルのみが設定されている場合、またはheightスタイルがまったくない場合、ブラウザーは内部コンテナーを垂直方向に揃えるのに問題があることを発見しました。私が行ったのは、高さのスタイルに値を追加して、問題を解決することでした。

例えば ​​：

.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で上書きされます。つまり、ieは満足しており、min-heightを使用できます。

これが誰かに役立つことを願っています。

フレックスボックス化さflex-direction: columnれているコンテナに、フレックスボックス化されたdivをラップしてみてください。

これをIE11でテストしたところ、うまくいきました。奇妙な修正ですが、Microsoftが内部のバグ修正を外部にするまでは...修正する必要があります！

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でテストする2つの例：http ://codepen.io/philipwalton/pen/JdvdJE http://codepen.io/chriswrightdesign/pen/emQNGZ/

これが私の作業ソリューション（SCSS）です。

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

誰かが私が持っていたのと同じ問題でここに来た場合に備えて、これは以前のコメントでは特に取り上げられていません。

私が持っていたmargin: auto、それはそれの親（または外側の要素）の底に固執する原因と内側の要素に。私にとってそれを修正したのは、マージンをに変更することmargin: 0 auto;でした。

これは既知のバグで、Microsoft内部で修正されたようです。

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

https://github.com/philipwalton/flexbugs/issues/231#issuecomment-362790042からの元の回答

.flex-container{
min-height:100px;
display:flex;
align-items:center;
}

.flex-container:after{
content:'';
min-height:inherit;
font-size:0;
}

私は両方のフィドルを更新しました。それがあなたの仕事を終わらせてくれることを願っています。

センタリング

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

あまり経験はありませんがFlexbox、htmlとbodyタグの高さを強制すると、サイズを変更するとテキストが上部に表示されなくなるようです。IEでテストすることはできませんでしたが、Chromeで同じ効果が見つかりました。

私はあなたのフィドルをフォークし、heightおよびwidth宣言を削除しました。

body
{
    margin: 0;
}

また、flex設定を他のflex要素に適用する必要があるように見えました。ただし、発生した問題に適用するdisplay: flexため、.inner明示的に.innerto display: blockを設定.outerしflex、位置決め用にto を設定します。

.outerビューポートを埋める最小の高さdisplay: flex、を設定し、水平方向と垂直方向の配置を設定します。

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

明示的に設定.innerしましたdisplay: block。Chromeでは、flexから継承したように見えました.outer。幅も設定します：

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

これによりChromeの問題が修正されました。うまくいけば、IE11でも同じことができるでしょう。これが私のフィドルのバージョンです：http : //jsfiddle.net/ToddT/5CxAy/21/

私のために働いた何が良い解決策を見つけ、このリンクをチェックhttps://codepen.io/chriswrightdesign/pen/emQNGZ/?editors=1100 最小- 100％：まず、私たちは、親のdiv、二我々の変更の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;
}  

親の幅と高さを定義できる場合、コンテナを作成せずに画像を集中化する簡単な方法があります。

何らかの理由で、最小幅を定義すると、IEは最大幅も認識します。

このソリューションは、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%;
}

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