Centering modals that work in IE8

Question

I am trying to center my modals and I have the following code http://jsfiddle.net/be34jkzk/4/

That is the code I have. I just want to make sure that the modal is centered and kinda responsive. I tried changing the code for modalPopupClass to something like this, but it displays it weird on IE8.

CSS:

.modalPopupClass{
    display:none;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 50%;
    max-width: 630px;
    min-width: 320px;
    height: auto;
    z-index: 4020;
    transform: translateX(-50%) translateY(-50%);
    }

PS: I added the javascript as an in-line script and at least there's no more console errors: http://jsfiddle.net/be34jkzk/2/ — ne1410s, Sep 24 '14 at 16:23
[Big red block for transform in IE8 on caniuse.com](http://caniuse.com/#search=transform) — misterManSam, Sep 24 '14 at 16:23
Here's some useful stuff on centering divs in IE8: http://stackoverflow.com/questions/662341/using-margin-0-auto-in-internet-explorer-8 — ne1410s, Sep 24 '14 at 16:26

misterManSam · Accepted Answer · 2014-09-24T16:58:32.643

Here is a technique to keep a fluid height and width div dead center vertically and horizontally. Compatible in IE8+

This is made possible with the combination of margin: auto and a tug-of-war between top: 0; left: 0; bottom: 0; and right: 0;
Use a percentage width and height (it needs a height)
Use a combination of min / max width and min / max height

Experiment to get the best results for your project.

Here is a write up on the technique over on Smashing Magazine

CSS / HTML / Demo

.dead-center {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background: #F00;
  height: 50%;
  width: 50%;
  min-width: 100px;
  min-height: 100px
}

<div class="dead-center"></div>

Centering modals that work in IE8

1 Answers1