justify content space evenly not showing the sub div to the center - html

Question

i have a parent container inside two sub containers are there each container have a fixed height and width in each sub containers i have a loader loader 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>
how can is show the same loader in both sub div at the center , i have added one more class, right now loader is showing not to the center.
when i have given
justify-content: center
it works , but how can i align the loader to the center of the both div making
justify-content: space-evenly;
Also for IE will this work ?

Answer 1

It Worked. Made the css for the loader as below, removed the position and made width to 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;
}