Center a div with CSS on IE8

HTML & CSS
1

I have following code


<html>
<head>
<title>Welcome</title>
<style>
#container {width: 800px; margin: 0 auto; border: thin solid #ccc; background-color: #fff;}
</style>
</head>

<body bgcolor=#36393D>

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


</body>
</html>

I wanted div with id container show in center of screen with margin on left and right. So on high resolution monitors, site display in center.

It works find on Firefox, but it display left aligned on IE 8.

Anyone know how to get it centered in IE 8 ?

2

You don’t have a DTD declared on your document. That makes IE go into quirks mode. Try this:


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

<html lang="en"><head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Welcome</title>

  <style type="text/css">
    body {
        background:#36393D;
        text-align:center;
      }
      
    #container {
        text-align:left;
        width:800px; 
        margin:0 auto; 
        border:thin solid #ccc; 
        background-color:#fff;
      }
  </style>

</head><body>
  <div id="container">
    <h1>Welcome</h1>
  </div>
</body></html>
3

To further explain, IE reverts to IE5.5 in quirks mode when no doctype is declared, and IE5.5 doesn’t support auto margins (aka centering block elements via that).