Centering Div with Ie

Centering elements doesn't work in Internet Explorer

The problem is caused by a combination of two factors:

conflict between author and Bootstrap styles
faulty IE rendering behavior

This is the code at issue:

Bootstrap styles:

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;   /* <-- source of the problem in IE */
    margin-left: auto;    /* <-- source of the problem in IE */
}

Author styles:

.content-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center; /* <-- source of the problem in IE */
    float: none;
    max-height: 30%;
}

To make a long story short, for the content to center properly in IE use either auto margins or justify-content: center.

Using both breaks the centering in IE because of faulty implementation of CSS priority.

For details see my answer here: Flex auto margin not working in IE10/11

Revised Demo (with justify-content disabled)

Div not centering in IE

Remove the <center> tags and the align="center", and add a wrapper <div id="content"> around all your content. Then add this CSS style.

#content {
    width: 960px;
    margin: 0 auto;
}

Example:

<div id="content">
    <h3>Ship Detail</h3>
    <div class="filedrop">
        <div id="hugeimage">
            <a href="#" target="_blank">
                <img src="images/spin/wait30.gif" />
            </a>
        </div>
        <div id="imageinfo"></div>
        <div class="thumbnails"></div>
    </div>
</div>

div not centered in IE but works fine in chrome and firefox

It's because you are missing normal transform property (and -ms for old browsers)
http://jsfiddle.net/tvc4tv9L/2/

-moz-transform:    translate(-50%, -50%);
-o-transform:      translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

Center Center align in Internet Explorer is offset

IE has probles with centering the element if parent is layout="row".

EDIT_01: It has problems if there is only one element centered vertically or something like that, I had the same issues with that.

If you want both "title" and "progress" to be centered like in jsfiddle, you should use layout="column" for "loader" and no absolute positioning for "title":

HTML

<main ng-app="sandbox" flex layout="column" class="col-xs-12" id="view">

  <md-content class="loader" layout="column" layout-align="center center" flex>
    <div id="title">
      <span>Loading...</span>
    </div>
    <div class="progress">
      <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
      </div>
    </div>
  </md-content>

</main>

CSS

#view {
  height: 100%;
  width: 100%;
}

.progress {
  width: 100%;          -- to stretch it to 260px max
  max-width: 260px;
}

#title {
  color: black;
  font-family: "lato", sans-serif;
  font-weight: 300;
  font-size: 40px;
  letter-spacing: 10px;
  padding-left: 10px;
}

EDIT_02: Also there were many redundant flex attributes.

EDIT_03: Using layout-fillargument will save some work, you don't need to flex to many elements and use to manny layout settings: https://jsfiddle.net/suunyz3e/224/

IE 11 align center

You can use top:50%;transform:translateY(-50%); for .selectContainer i I tested it.

.selectContainer i {
    color: #707070;
    background: red;
    position: absolute;
    right: 0px;
    padding: 0 16px;
    top: 50%;
    transform: translateY(-50%);
}