Centering DIV with IE

Question

I am trying to center a DIV, with "margin:auto" . It works fine with Chrome and FF but the following code does not center the DIV with IE:

CSS

#container {
 margin:auto;
 width:950px;
 height:50px;
 background:#000;
}

HTML

<div id="container"></div>

What am I doing wrong?

Thanks,

Joel

Edit (full HTML/CSS code):

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css">
<style>

#container {
 margin: 0 auto; 
 width:950px;
 height:50px;
 background:#000;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>

Which version of IE have you tested this code with? I normally define a `width` and then set `margin:0 auto` and it works fine even in IE... — Šime Vidas, Oct 21 '10 at 13:44
True, but as Sime said use margin: 0 auto; You only have margin:auto — Rob, Oct 21 '10 at 13:48
I get the same results... i am editing the original post with the full HTML code. Maybe you can run it on IE9 and tell me if it is also aligned to the left on your end. — Joel, Oct 21 '10 at 13:53
`margin:0 auto;` simply states that the top and bottom margins should be zero pixels. The auto refers to horizontal margins, which would be centered in this case. — Roy, Aug 20 '13 at 20:01
Probably you can find you answer at http://stackoverflow.com/questions/662341/using-margin-0-auto-in-internet-explorer-8 — german1410, May 26 '14 at 17:29

score 18 · Answer 1 · 2014-01-08T10:33:05.123

18

Insert this at the top of the document:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

or for html5:

<!DOCTYPE html>

Reference for document type declaration

edited Jan 08 '14 at 10:33

answered Jul 05 '11 at 11:20

score 7 · Answer 2 · answered Aug 15 '11 at 20:35

Margin Auto Centering

Problem: When centering div tags via either the margin-left: auto; or margin-right: auto; settings, this will not work in Internet explorer unless you add the following to your style sheet for the html body:

html, body {
 text-align: center;
}

Don't forget to now add this to your paragraphs and headings as the above setting will now cause these to also center.

p {text-align: left;}

score 1 · Answer 3 · answered Mar 25 '14 at 12:28

You need to reference the doctype as mentioned by '2astalavista'

Otherwise

1.Center using positioning and negative margin if it is a known width

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css">
<style>


#container {
position: relative;
left: 50%; 
margin: 0 0 0 -475px; /* negative margin of half the width */
width:950px;
height:50px;
background:#000;
}

</style>
</head>
<body>
<div id="container"></div>
</body>
</html>

2.Use the outercontainer and text-align center to centre the element:

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css">
 <style>

#outerContainer{
text-align: center;
}

#container {
margin: 0 auto; 
width:950px;
height:50px;
background:#000;
}
</style>
</head>
<body>
<div id="outerContainer">
      <div id="container"></div>
</div>
</body>
</html>

score 1 · Answer 4 · answered Oct 21 '10 at 13:48

1

Try this;

#container {
 margin:0 auto;
 width:950px;
 height:50px;
 background:#000;
}

answered Oct 21 '10 at 13:48

Rob

6,731
12
52
90

Using margin: 0 auto; makes not a shred of difference – Alex Oct 21 '10 at 13:51
@Alex Be careful, I wouldn't be surprised if this change would make a difference in IE. IE has lots of weird bugs – Šime Vidas Oct 21 '10 at 13:53
Trust me, it's not. It's because the poster most likely doesn't have a valid doctype. Although I do understand where you are coming from having dealt with plenty of IE bugs in my time! – Alex Oct 21 '10 at 13:57

score 1 · Answer 5 · edited Aug 17 '17 at 08:41

1

This one worked for me:

#container {
   width: 80%; /* or the width of the object inside the container */
   margin-left: auto;
   margin-right: auto;
}

edited Aug 17 '17 at 08:41

Ivan

34,531
8
55
100

answered Jan 10 '17 at 09:47

Arun Prasad E S

9,489
8
74
87

score 0 · Answer 6 · answered Apr 08 '13 at 16:22

0

You should put right & left attributes in there also:

#container
{
  right: 0px;
  left: 0px;
  margin: 0px auto;
  width: 950px;
}

answered Apr 08 '13 at 16:22

dougczar

585
7
8

score 0 · Answer 7 · answered Oct 21 '10 at 13:50

0

This should help you out:

body {
    text-align: center;
}

#container {
    text-align: left;
    margin:auto;
    width:950px;
    height:50px;
    background:#000;
}

You do nothing wrong, IE6 does: it ignores "margin: auto;"

answered Oct 21 '10 at 13:50

Thomas

1,444
1
13
25

1

This method hasn't been required since IE5.5 I believe. Auto margins have always working in IE... it's just a case of making sure the browser isn't rendering in Quirks Mode. – Alex Oct 21 '10 at 13:56
2

IE9? maybe next time you have to say you're talking about IE9. – Thomas Oct 21 '10 at 13:56

Taiwotman · Answer 8 · 2018-07-18T00:01:43.820

This worked for me with regards with the IE centering bug:

<div style="margin-left: auto; margin-right: auto; width: 50%;">
      <div style="text-align: left; margin: 1em auto; width: 50%;">
       

          <form action="/action_page.php">
            First name:<br>
            <input type="text" name="firstname" value="Tom">
            <br>
            Last name:<br>
            <input type="text" name="lastname" value="Cruise">
            <br><br>
            <input type="submit" value="Submit">
          </form> 

      </div>
</div>

Centering DIV with IE

8 Answers8

Linked