justify-content: center does not work in IE11

Question

I have the below HTML to show a loader with some content below loader image:

.LoaderText {
    position: fixed;
    height: 0;
    width: 0;
    display: flex;
    justify-content: center;
    top: 50%;
    left: 50%;
    white-space: nowrap;
}

.loader {
    position: fixed;
    border: 12px solid #f3f3f3; /* Light grey */
    border-top: 12px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 2s linear infinite;
    opacity: 0.5;
    filter: Alpha(opacity=50);
}

#txtLoader {
    Color: #f3f3f3;
    font-size: 14px;
    margin: 83px 0 0 10px;
}

<div class = "LoaderText">
    <a class="loader" [ngClass]= "{busyloader: IsBusy}" ></a>        
    <p id = "txtLoader">{{BusyContent}}</p>
</div>

This code is working well in Chrome but does not work in IE11. {{BusyContent}} under the loader image is not centrally aligned in IE. I have tried with align-items: center and vertical-align: middle, but no success. I want to fix this issue and it should work properly in both Chrome and IE.

IE11:

Image in IE

Chrome:

Image in Chrome

Can some please provide me some inputs on the same?

Possible duplicate of [justify-content: center in IE](https://stackoverflow.com/questions/29270465/justify-content-center-in-ie) — vivekkupadhyay, Aug 03 '17 at 12:39
@Vivek i have referred the content also, But it did not help me. — Vanu, Aug 03 '17 at 12:46
Does this work in ie11? https://jsfiddle.net/9frmwq52/ I only checked in simulate mode on safari. I am not really surprised it does not work in IE since your flex container does not even have a width, shouldn't even work in chrome — Huangism, Aug 03 '17 at 13:43
Should make your container 100% width and remove the left, or don't even use flex, just text-align center it — Huangism, Aug 03 '17 at 13:58
I have made below changes in my class .LoaderwithText { position: absolute; display: flex; justify-content: center; flex-direction:column; align-items:center; top: 50%; left: 50%; white-space: nowrap; } and it works out for me.. Thanks everyone for your help — Vanu, Aug 09 '17 at 05:33

score 0 · Answer 1 · answered Aug 22 '19 at 20:25

Check if this helps...

<!DOCTYPE html>
<html>
    <head>
        <style>
            body{background-color:#000000;}
            .LoaderText {
                position: fixed;
                top: 50%;
                left: 50%;
                height:150px;
                width:250px;
                margin-left:-125px;
                margin-top:-75px;
            }
            .loader {
                border: 12px solid #f3f3f3; /* Light grey */
                border-top: 12px solid #3498db; /* Blue */
                border-radius: 50%;
                width: 80px;
                height: 80px;
                animation: spin 2s linear infinite;
                opacity: 0.5;
                filter: Alpha(opacity=50);
                margin:auto;
                display:block;
                text-align:center;
            }
            #txtLoader {
                Color: #f3f3f3;
                font-size: 14px;
                position: absolute;
                left:0;
                right:0;
                bottom:0;
                height:20px;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <div class = "LoaderText">
            <a class="loader" class= "busyloader" ></a>
            <p id = "txtLoader">Content are loading. Please wait...</p>
        </div>
    </body>
</html>

score -5 · Answer 2 · answered Aug 04 '17 at 05:57

.LoaderText {
    position: fixed;
    height: 0;
    width: 0;
    display:-moz-box;
    -moz-box-orient:horizontal;
    -moz-box-pack:center;
    -moz-box-align:center;

    /* Safari and Chrome */
    display:-webkit-box;
    -webkit-box-orient:horizontal;
    -webkit-box-pack:center;
    -webkit-box-align:center;

    /* W3C */
    display:box;
    box-orient:horizontal;
    box-pack:center;
    box-align:center;

    /* IE10 */
    display: -ms-flexbox;
    -ms-flex-align: center;
    -ms-flex-pack: center;
    -ms-box-orient:horizontal;
    top: 50%;
    left: 50%;
    white-space: nowrap;
}

.loader {
    position: fixed;
    border: 12px solid #f3f3f3; /* Light grey */
    border-top: 12px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 2s linear infinite;
    opacity: 0.5;
    filter: Alpha(opacity=50);
}

#txtLoader {
    Color: #f3f3f3;
    font-size: 14px;
    margin: 83px 0 0 10px;
}

<div class = "LoaderText">
    <a class="loader" [ngClass]= "{busyloader: IsBusy}" ></a>        
    <p id = "txtLoader">{{BusyContent}}</p>
</div>

I have changed your CSS with some additional properties.

Hope this helps.

justify-content: center does not work in IE11

2 Answers2