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, …