How to center flex items in IE

Question

I'm having an issue with flex in IE. My text doesn't appear to be centering correctly. It works fine on all other browsers, however on IE it seems to break its container. I've tried playing around with min height and width, but I'm still having trouble.

Any help would be really appreciated, thanks in advance.

JS FIDDLE

* {
  margin: 0px;
  padding: 0px;
}

.menu_container {
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}

.box {
  height: 100vh;
  min-height: 400px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  z-index: 50;
}

.menu_title {
  position: absolute;
  color: #f5f5f5;
  z-index: 60;
}

.band {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  height: 30%;
  background-color: #111111;
  opacity: .8;
  z-index: 10;
}

.food {
  background: url("https://ichef.bbci.co.uk/news/660/cpsprodpb/1325A/production/_88762487_junk_food.jpg") center no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

.drink {
  background: url("http://www.seriouseats.com/recipes/images/2015/05/20150419-summerdaze-cocktail-Elana-Lepkowski-1500x1125.jpg") center no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

<div class="menu_container" id="menu">
  <div class="box food">
    <div class="band"></div>
    <h3 class="menu_title">
      <p>OUR FOOD</p>
    </h3>
  </div>
  <div class="box drink">
    <div class="band"></div>
    <h3 class="menu_title">
      <p>OUR DRINKS</p>
    </h3>
  </div>
</div>

You can refer the answer provided by http://stackoverflow.com/a/35137869/3597276 — AKNair, Feb 08 '18 at 12:21
The provided HTML structure is not appropriate to fully utilise the flexbox's capability. And we don't use flexbox if we need to stick on with `position: absolute;`. Can we modify the structure? — Gibin Ealias, Feb 08 '18 at 13:04
Of course, any help is welcome. Removing absolute causes an issue where the text doesnt stack on the band correctly — Supergogoman91, Feb 08 '18 at 13:06

score 1 · Answer 1 · answered Feb 08 '18 at 12:39

1

You are centering it with flex (applied to its container .box), so you don't need position: absolute; on those .menu_title elements. Erase that, most likely that's the cause for IE interpreting it in another way.

answered Feb 08 '18 at 12:39

Johannes

64,305
18
73
130

score 1 · Accepted Answer · answered Feb 08 '18 at 13:22

As mentioned by OP in the comments, HTML changes are allowed. Thus the below solution seems to be better in this scenario. Tested in ie10 and ie11. PEN

HTML

<div class="menu_container" id="menu">
  <div class="box food">
    <div class="band">
      <h3 class="menu_title">
        <p>OUR FOOD</p>
      </h3>
    </div>
  </div>
  <div class="box drink">
    <div class="band">
      <h3 class="menu_title">
        <p>OUR DRINKS</p>
      </h3>
    </div>
  </div>
</div>

CSS

* {
  margin: 0px;
  padding: 0px;
}

.menu_container {
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}

.box {
  height: 100vh;
  min-height: 400px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  z-index: 50;
}

.menu_title {
  /*   position: absolute; */
  color: #f5f5f5;
  z-index: 60;
}

.band {
  height: 30%;
  background-color: #111111;
  opacity: 0.8;
  z-index: 10;

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;

  -webkit-box-align: center;
  -moz-box-align: center;

  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;

  flex-basis: 100%;
  width: 100%;
}

.food {
  background: url("https://ichef.bbci.co.uk/news/660/cpsprodpb/1325A/production/_88762487_junk_food.jpg")
    center no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

.drink {
  background: url("http://www.seriouseats.com/recipes/images/2015/05/20150419-summerdaze-cocktail-Elana-Lepkowski-1500x1125.jpg")
    center no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

Please let me know whether this helps.

Worked like a charm, Thank you! – Supergogoman91 Feb 08 '18 at 13:28 — Supergogoman91, Feb 08 '18 at 13:28

How to center flex items in IE

2 Answers2

Linked