Why Does Display: -Ms-Flex; -Ms-Justify-Content: Center; Not Work in Ie10

Flexbox centering not working in IE 11

Flexbox is pretty buggy when it comes to IE per CanIUse, 2 of which that are mentioned:

In IE10 and IE11, containers with display: flex and flex-direction: column will not properly calculate their flexed childrens' sizes if the container has min-height but no explicit height property. See bug.
IE 11 does not vertically align items correctly when min-height is used see bug

This being said, add explicit heights as a fallback on .score-wrapper for IE11.

.box {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.score-wrapper {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 280px;
  height: 280px;
}

.overlay-circle {
  border-radius: 100px;
  border: 1px solid red;
  fill: transparent;
  height: 200px;
  position: absolute;
  width: 200px;
}

.center-circle {
  border-radius: 90px;
  border: 1px solid blue;
  height: 180px;
  position: absolute;
  width: 180px;
}

vertical align with flexbox in IE11 and IE10

How to make a cross browser solution where an element is vertical
aligned?

Take a look at this fiddle: http://jsfiddle.net/5ry8vqkL/

The technique applied there is using the "display: table". Here is an article for an in-depth view of the approach http://css-tricks.com/centering-in-the-unknown/

Supported browsers can be seen here: http://caniuse.com/#search=table-cell

HTML:

<div class="container">
    <div id="page-login">
        <div class="panel">Some content</div>
    </div>
</div>

CSS:

html, body {
    min-height:100%;
    height:100%;
}

.container {
    display: table;
    height:100%;
    width:100%;
    background:#303030;
}

#page-login {
    display: table-cell;
    vertical-align: middle
}

.panel {
    height: 100px;
    background-color: #fff;
}

IE10 - Trouble using flexbox to center multi-line text vertically within a div

If you wrap your info text in an extra <span>, you can use the double line-height trick from this other question to vertically center the text (without using flexbox):

How do I vertically align something inside a span tag?

Note: I had to remove the vertical padding and instead set the total height to 3em

.info {
  background: #404040;
  color: #fff;
  font-size: 1.4em;

  padding: 0 1em;
  /*height: 3em;*/
  line-height: 3em;
  text-align: center;
}
.info span {
  display: inline-block;
  line-height: 1em;
  vertical-align: middle;
}

Updated Pen: http://codepen.io/anon/pen/aOQegy

`display: inline-block` not working in IE10

As the site stands right now, there are issues in browsers other than Microsoft Edge.

For instance, if you start with a smaller Chrome window, load the page, and then maximize the window, you'll notice the failure of Chrome to properly resize the images. This isn't ideal.

After spending some time looking into the issues between Chrome and Microsoft Edge, I see that the browsers are not very good as resizing the containers when the images within are not at their natural dimensions. Just about every browser I tested failed in some way here.

One potential work-around that I considered was the use of display: table on the container, and on the content elements a value of display: table-cell. This would have worked, had your images been the same size, but with the second image being ~200% the dimensions of the first and third, this causes irregularities in the size of the resulting layout.

Since you suggested a baseline browser support of Internet Explorer 10, flexbox may be a reliable alternative for us. It's concise, supported to a large degree in IE 10, and yields more consistent ouput.

.container {  display: flex;  overflow-x: scroll;  position: absolute;  top: 0; left: 0;  bottom: 0; right: 0;}  section {    min-width: 496px;    box-sizing: border-box;  }    img {      height: 100%;    }

<div class="container">  <section>    <p>weekendwoning aan een meer</p>    <p>Deze vakantiewoning is gel...</p>    <p>Het ontwerp evolueerde van...</p>    <p>De woning  bestaat uit een...</p>  </section>  <img src="http://clients-are-heroes.jackietreehorn.be/tombubbe/wp-content/uploads/2015/10/foto-1.jpg" alt="Sample Image">  <img src="http://clients-are-heroes.jackietreehorn.be/tombubbe/wp-content/uploads/2015/10/beeld2.jpg" alt="Sample Image">  <img src="http://clients-are-heroes.jackietreehorn.be/tombubbe/wp-content/uploads/2015/10/DSC0014-waterkant-rechts.jpg" alt="Sample Image"></div>

Text Centering Using CSS not working in IE

The table cell needs the text-align: center.

Div display:initial not working as intended in ie10 and chrome 29

initial does not mean "the default value of a given property for a given element". It means "the default value of a given property as defined by the spec". The initial value of display is inline, not block, as stated here. This is regardless of what sort of element you apply it to. And as already mentioned, IE does not support the initial keyword.

If you want an element to be displayed as a block, use display: block. If you want it to be displayed inline, use display: inline. If you want it to use whichever is the browser default for it, do not set the display property at all.

Vertically center text in text input in IE9 + IE10

You need to reconcile the padding and line-height. With box-sizing: border-box, they are essentially fighting for the same real estate.

In other words, you are saying "fit 50px of line height into 50px of total vertical space, but also pad it by 20px".

A simple solution is to reduce the line-height so that padding * 2 + line-height = 50px. Or, if you want more line-height, reduce the padding. If you want to keep the same line-height and padding, increase the height to 70px.

Example: http://jsfiddle.net/D7v2Y/11/

input {
    display: block;
    box-sizing: border-box;
    line-height: 30px;
    height: 50px;
    padding: 10px;
}

HTML - IE10 does not display table correctly?

You are almost certainly having an issue with Compatibility Mode:

Click Tools -> Compatibilily View Settings

Untick "Display Intranet sites in Compatibility View"

For reasons beyond my imagination, Microsoft believes that by default Intranet sites should be rendered in "Compatibility View" mode, which basically means an earlier version of IE's rendering engine (I believe it goes all the way back to IE7).

http://windows.microsoft.com/en-CA/internet-explorer/use-compatibility-view#ie=ie-11

You might also want to look at this meta tag and the header you need to set in your web.config, as detailed in this SO post:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

X-UA-Compatible is set to IE=edge, but it still doesn't stop Compatibility Mode

Centering button using flex box not working in IE

As you have set position: absolute on the button, IE (and most likely Safari) won't center it as the other browser does.

To fix it, update your .play rule like this

.play {
    width: 100px;
    height: 100px;
    border-radius: 100%;
    border: none;
    background-color: rgba(200, 81, 8, 0.8);
    position: absolute;
    top: 50%;                                /* added */
    left: 50%;                               /* added */
    transform: translate(-50%,-50%);         /* added */
    ...

Updated codepen

Stack snippet

.captioned-video {  border: 1px solid red;  padding: 20px;  display: flex;  flex-direction: column;}.captioned-video .video-container {  overflow: hidden;  display: flex;  justify-content: center;  align-items: center;  flex-direction: column;  position: relative;}.captioned-video .video-container img {  flex: none;}.captioned-video .video-container iframe {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;}.captioned-video .video-container .play {  width: 100px;  height: 100px;  border-radius: 100%;  border: none;  background-color: rgba(200, 81, 8, 0.8);  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  padding: 0;}.captioned-video .video-container .play:hover {  transition: all ease 0.5s;  background-color: #c85108;}.captioned-video .video-container .play:after {  content: "";  position: relative;  display: inline-block;  border-style: solid;  border-width: 20px 0 20px 30px;  border-color: transparent transparent transparent white;  top: 2px;  left: 5px;}.captioned-video .caption .caption__subhead {  color: blue;  font-family: Arial;  font-size: 14px;}.captioned-video .caption p {  font-size: 12px;  font-style: Arial;}

<div class="captioned-video">    <div class="video-container" data-module-dynamic="embed-video">        <img src="http://placehold.it/300/f99"/>        <button class="play" data-video="video url here"></button>    </div>    <div class="caption">        <h3 class="caption__subhead">Caption Headline</h3>        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>   </div></div>