CODEWITHSUNDEEP
htmlcssgoogle-chromeinternet-exploreralignment
anish
anish

Reputation: 97

How to keep div in center of the page in IE-11?

I wanted to keep a div in the center of my page, its working fine with google chrome, but when i am opening the same in IE-11 its not align to center, its coming to the left top corner(the complete div).

NOTE:

Its working fine with local server (eg. Dreamweaver + Xampp), but when I am hosting it to web server, then only this problem is coming. when I am removing position: fixed/absolute the little bit its working but not as expected.

If some how I can add position:fixed/absolute then it will be ok. Please assist

here is the css code

border: 2px solid #1E90FF;
position: absolute;
height:400px;
width:450px;
top: 0;
bottom: 0;
left: 0; 
right: 0;
margin: auto;

Upvotes: 1

Views: 7142

Answers (2)

Himanshu Kapoor
Himanshu Kapoor

Reputation: 11

In one instance I solved centering the element in IE by using following properties. I added the code in media query for IE as the base application was defined in flexbox model and it was interfering with centering in IE. You can use this block of code

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
body { 
    height: 100%;
    overflow-x: hidden;
  }
 #any-height {
     background: #000;     
     display: block;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     text-align: left;
     width: 200px;
     height: 200px;     
    }
  }

Upvotes: 1

Darren Willows
Darren Willows

Reputation: 2131

It a lot easier if you just don't use margins. Vertical-align is really what you should rely on for fluid-height vertical centring.

HTML

<span></span><div id="any-height"></div>

CSS

* { margin: 0; padding: 0; }
html, body { 
    height: 100%;
    text-align: center; }
span { 
    height: 100%;
    vertical-align: middle;
    display: inline-block; }
#any-height { 
    background: #000;
    text-align: left;
    width: 200px;
    height: 200px;
    vertical-align: middle;
    display: inline-block; }

jsfiddle

I'm pretty sure that this works in all major browsers, and if you're looking for extended compatibility, you should check this link

Upvotes: 1

Related Questions