均匀地证明内容空间不将子 div 显示到中心答案

【问题标题】：justify content space evenly not showing the sub div to the center均匀地证明内容空间不将子 div 显示到中心
【发布时间】：2018-07-11 20:42:28
【问题描述】：

我在两个子容器中有一个父容器，每个容器在每个子容器中都有固定的高度和宽度我有一个加载器加载器 gif。

.parent-container{
    display: flex;
    justify-content: space-evenly;
    border: 7px solid black
}

.sub-container-one{
 width:400px;
 height: 300px;
 border: 3px solid blue;
}

.sub-container-two{
  width: 300px;
  height: 300px;
  border: 3px solid red;
}

.loader{
    display: block;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    position: absolute;
    background-image: url('http://loadinggif.com/images/image-selection/3.gif');
    background-repeat: no-repeat;
    background-position: center;
}

.second-loader{
  margin-left:50%;
}

<div class="parent-container">
  <div class="sub-container-one">
   <div class="loader"></div>
  </div>
  <div class="sub-container-two">
    <div class="loader second-loader"></div>
  </div>
</div>

如何在中心的两个子 div 中显示相同的加载器，我又添加了一个类，现在加载器显示不在中心。

当我给了

justify-content: center

它有效，但我怎样才能将加载器对齐到两个 div 制作的中心

justify-content: space-evenly;

这也适用于 IE 吗？

【问题讨论】：

怎么样 :.parent-container>div{ background-image: url("http://loadinggif.com/images/image-selection/3.gif"); background-repeat: no-repeat; background-position: center; } ？或在代码中设置 gif 并通过 margin:auto codepen.io/anon/pen/ajzyNX 将其居中

标签： html css flexbox

【解决方案1】：

成功了。如下所示为加载器制作 css，移除位置并将宽度设置为 100%

.loader{
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('http://loadinggif.com/images/image-selection/3.gif');
    background-repeat: no-repeat;
    background-position: center;
}

【讨论】：