How to center flex items in IE

问题

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>

回答1:

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.

回答2:

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.

来源：https://stackoverflow.com/questions/48685277/how-to-center-flex-items-in-ie