web制作覚え書き

IEでflexboxの上下中央寄せが効かない時の対処法

web制作覚え書き

追記:2019.1.30

IEも
最初のやり方で効くようになってるみたいです。

この記事とてもアクセスが多く、でも最後まで読んで「結局なんだよ!!」って怒った方多数いるかと思いますが・・・いつの間にか大丈夫になってたみたいです。よかった!!

↓ここブクマしておくといいですよ!!
上下中央揃えのCSSまとめ。Flexboxがたった3行で最も手軽


何回もはまってる気がするので忘れないように書いておきます。(※背景画像は仮画像です)

こんなようなボックスを、どんな要素内でもレスポンシブでも上下中央に配置できる魔法の3行。それがflexbox。

display:flex;
align-items: center;
justify-content: center;

これがIEで見ると・・・

全然効いてない。( ̄▽ ̄)

お客さんのところで一緒に見てて焦りました。

背景画像をぼけさせるcss filter: blur;も効いてないし…。

しかし、IEのシェアは日本ではいまだ30%弱…時々調べてもなかなか低くならないシェア率。やっぱりまだ無視はできない存在(>_<)

色々調べて片っ端からトライ&エラーしてみました。もう私の検索窓は
なんか一文字でも打つと「ie11 flexbox 効かない 中央」と出てくるほどに。

【やってみたこと】

  1. margin:auto; がダメらしい。
    参考サイト:IE11でjusty-content: centerしてるのに両端中央揃えできない時の原因→【結果】今回は入ってないので関係なし。
  2. ベンダープレフィックスをちゃんとつける
    (ちなみにこれをつけるのは親要素の方)

    display:flex;
    display:-ms-flexbox; *IE10*/
    align-items: center;
    -ms-flex-align:center;/*IE10*/
    justify-content: center;
    -ms-flex-pack: justify; /*IE10*/

    →【結果】なにも変わらなかった。

  3. flexibility.jsを入れてみる。
    参考サイト:IE8・9にもFlexboxを対応させる、flexibility.jsがとっても便利!
    →【結果】ダメ。対応させたいのはIE11だし。やっぱり関係なかった。
  4. 子要素に display:block; を指定してみる。(もうやけくそ)
    参考サイト:IEでmargin:autoが効かない(センターに寄らない)→【結果】ダメ。この人の場合はmain要素だからだった。div要素はさすがにブロック要素だよね。わらにもすがってみた。
  5. 【最終手段】flexboxを諦める。(;д;)
    参考サイト:CSSで中央寄せする9つの方法(縦・横にセンタリング)子要素の方に以下をつける

    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform : translate(-50%,-50%);
    transform : translate(-50%,-50%);
    

    【結果】成功!!


諦めるのはちょっと悔しかったけど、時間はどんどん過ぎていくし、直って本当に良かったです!!ついつい意地になっちゃうんですよね…(・_・。)

ちなみにこちらのサイトにはflexboxについてこう書いてありました。

かなり便利なのですが、古いAndroidブラウザやIE9以下で未対応なこと、IE11でもバグが多数確認されていること等から、単純な中央配置で使う必要はないかもしれません。

はは・・・(^_^;) そうですね・・・以後肝に銘じます。

最後にコードのbefore afterを載せておきます。忘備録として。

【Before】

#lower_top{
	background-image: url(images/top_main_01.jpg);
	background-size: cover;
	height: 300px;
	position:relative;
	z-index: 0;
        overflow: hidden;/*ブラー効果でボヤけた部分を非表示*/

	display:flex;
	display:-ms-flexbox;/*--- IE10 ---*/
	align-items: center;
	-ms-flex-align:center;
	justify-content: center;
	-ms-flex-pack: justify; /*IE10*/
	}

@media (max-width:768px) {#lower_top{height: 200px;}}
/*スマホ時背景画像の高さ200pxに*/

/*背景画像をぼかす*/
#lower_top:before{
  content: '';
  background: inherit;/*.bgImageで設定した背景画像を継承する*/
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  position: absolute;
  /*ブラー効果で画像の端がボヤけた分だけ位置を調整*/
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  z-index: -1;/*重なり順序を一番下にしておく*/
}

/*子要素*/
.lower_top_box{
    position:absolute;
	background-color: white;
	border-radius:7px;
	padding:3rem 5rem;
	text-align:center;
    font-weight:500;
	color:#5C5346;
	letter-spacing: .2em;
	font-size:120%;
	box-shadow: 0 0  8px #666;
    }

 

【After】

#lower_top{
	background-image: url(images/top_main_01.jpg);
	background-size: cover;
	height: 300px;
	position:relative;
	z-index: 0;
     overflow: hidden;/*ブラー効果でボヤけた部分を非表示*/
}

@media (max-width:768px) {#lower_top{height: 200px;}}

#lower_top:before{
  content: '';
  background: inherit;/*.bgImageで設定した背景画像を継承する*/
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  position: absolute;
  /*ブラー効果で画像の端がボヤけた分だけ位置を調整*/
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  z-index: -1;/*重なり順序を一番下にしておく*/
}

.lower_top_box{
	background-color: white;
	border-radius:7px;
	padding:3rem 5rem;
	text-align:center;
    font-weight:500;
	color:#5C5346;
	letter-spacing: .2em;
	font-size:120%;
	box-shadow: 0 0  8px #666;
	position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform : translate(-50%,-50%);
    transform : translate(-50%,-50%);
    }

※position とか z-indexとか after要素とかは、背景画像にfilterかけるための記述です。
これしないとblurの場合は子要素の文字までぼけちゃうので。
filterで暗くしたりする場合も同じです。

単純に上下中央寄せする場合は

flexbox関係全部削除して、

position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform : translate(-50%,-50%);
transform : translate(-50%,-50%);

!!

以上。いい方法があったらぜひぜひ教えてください!!

 

    この記事を元に問い合わせる








    ※確認画面は出ません。そのまま送信されますので、よくご確認の上送信ボタンを押してください。

    ※不具合などで送れない場合は、お手数ですが info@nagakute-design.comまたは090-6363-6760(深谷)まで連絡下さい。