如何在 IE 中将弹性项目居中答案

【问题标题】：How to center flex items in IE如何在 IE 中将弹性项目居中
【发布时间】：2018-07-19 00:15:21
【问题描述】：

我在 IE 中遇到了 flex 问题。我的文字似乎没有正确居中。它在所有其他浏览器上都可以正常工作，但是在 IE 上它似乎破坏了它的容器。我尝试过使用最小高度和宽度，但我仍然遇到问题。

任何帮助将不胜感激，在此先感谢。

* {
  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>

【问题讨论】：

可以参考stackoverflow.com/a/35137869/3597276提供的答案
提供的 HTML 结构不适合充分利用 flexbox 的功能。如果我们需要坚持使用position: absolute;，我们不会使用 flexbox。我们可以修改结构吗？
当然，欢迎任何帮助。删除 absolute 会导致文本无法正确堆叠在 band 上的问题
另外，您希望支持哪些版本的 IE？
10/11 如果可能的话。

标签： html css internet-explorer flexbox

【解决方案1】：

正如 OP 在 cmets 中提到的，HTML 更改是允许的。因此，在这种情况下，以下解决方案似乎更好。在 ie10 和 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;
}

请让我知道这是否有帮助。

【讨论】：

工作就像一个魅力，谢谢！

【解决方案2】：

您使用 flex 将其居中（应用于其容器 .box），因此您不需要在那些 .menu_title 元素上使用 position: absolute;。删除它，很可能是 IE 以另一种方式解释它的原因。

【讨论】：