CODEWITHSUNDEEP
css
user3351236
user3351236

Reputation: 2538

How to center a “position: absolute” element in IE 9,10,11

How to center a “position: absolute” element in IE 9, 10, 11, my example do not work in Internet Explorer. Also this "position: absolute; left:50%; margin-left:-20px;" ,manner will not suit me, as the layout is responsive.

.box{
    position: absolute;
    top: 150px;
    right: 0;   
    left: 0;
    margin: auto;       
}

<body>
<div class="container">
<div class="box">
</div>
</div>
</body>

Upvotes: 20

Views: 26976

Answers (5)

TrevorGee4
TrevorGee4

Reputation: 1

You shouldn't have to set a bottom property (even in IE), to center that element horizontally.

However, if you wanted to vertically center the element, you would need the bottom property in conjunction with an auto margin for top and bottom.

If your element will only center horizontally with "bottom" set to 0, then there is something conflicting in your code forcing you to use that property. I have seen this happen before in Bootstraps Ecosystem when not applying the proper hierarchy of container --> row and so on.

Upvotes: 0

Sean Kendle
Sean Kendle

Reputation: 3629

I just struggled with this myself, and the specific key for me was changing the max-width property to be a width property. Adding a max-width doesn't break it, but it relies on the width property in IE, apparently, where in Firefox it worked with just the max-width set.

I hope this helps someone else!

Upvotes: 3

Karim AG
Karim AG

Reputation: 2193

Just give it a fixed width and height and remove top:150px

Upvotes: 3

Sajad Karuthedath
Sajad Karuthedath

Reputation: 15807

<body>
<div class="container">
<div class="box">
</div>
</div>
</body>

CSS

.box{
    position: absolute;
    top:0;
    right: 0;   
    left: 0;
    bottom:0;   //specify all including bottom:0
    margin: auto;
    height:200px;
    width:200px;       
}

DEMO

Upvotes: 26

Selvamani
Selvamani

Reputation: 7684

It works fine here Jsfiddle

.box{
position: absolute;
top: 150px;
right: 0;   
left: 0;
margin: auto;   
border: 2px solid red;    
width: 50px;
height: 50px;
}

Upvotes: 2

Related Questions