最近はもっぱらレイアウトを作成するときはflexboxを利用しているのですが、やるたびにIEのflexboxバグに毎回引っかかって悩まされていたので、もう忘れないようにしようと、ここに残しておくことにしました。IEだと上下中央寄せがうまくいかないflexboxだと上下中央寄せも簡単なのでよくやっているのですが、はじめにつくっているときはChromeでやっているので、表示の確認するときにIEを開いてみると「位置がずれてるやん!?」ってことが何度も起きて、そのたびに毎回調べるハメに...ここは毎回見ている気がします。0;}Chromeでの表示Chromeだとちゃんと上下中央寄せで表示されていますが...IE11での表示IEだとなぜか中央ではなく、右に寄せられてしまっています。かんたんな解決策IEだと表示がずれるということが分かりました。すればIEでもきちんと表示されるようになるかというと...うまくいかなかった理由はbox-innerにmarginを使っていたからだと思われるので、かんたんに解決できる策としては、box-innerにdiv要素を1枚かぶせてあげるとうまくいきました。</div></div><div>このコードに書き換え、IEで確認してみると、うまく上下中央寄せさせることができました。IEでも上下中央寄せされたflexboxは便利だけれどもflexboxは使えば便利ですけど、今回の例のように表示が思ったとおりにならないことが多いのが困りモノ。IEだけとは限りませんが、URLなどのアルファベットの文字列がきたときに枠からはみだしちゃったり、min-heightの指定でうまくいかないことがあったりしたので、よく確認して使わないとなぁと思いました。Webデザインの教科書を読むWordPress公式ディレクトリ掲載テーマ「Dan」を作成しましたプロフィールYochiHTMLやCSS、WordPressといったWeb制作やサッカー、ゲームなどに興味があるこのサイトの管理人。