How do you easily horizontally center a <div> using CSS?

Question

I'm trying to horizontally center a <div> block element on a page and have it set to a minimum width. What is the simplest way to do this? I want the <div> element to be inline with rest of my page. I'll try to draw an example:

page text page text page text page text
page text page text page text page text
               -------
               | div |
               -------
page text page text page text page text
page text page text page text page text

Answer 1

.center {
   margin-left: auto;
   margin-right: auto;
}

Minimum width is not globally supported, but can be implemented using

.divclass {
   min-width: 200px;
}

Then you can set your div to be

<div class="center divclass">stuff in here</div>

Answer 2

margin: 0 auto;

as ck has said, min-width is not supported by all browsers

Answer 3

minimal answer

stylesheet

div.mydiv {width: 200px; margin:0px auto}

html

<div class="mydiv">

I am in the middle

</div>

Your diagram shows a block level element also (which a div usually is), not an inline one.

of the top of my head, min-width is supported in ff2+/safari3+/ie7+. Can be done for ie6 using hackety css, or a simple bit of JS.

Answer 4

In most browsers this will work...

Stylesheet

div.centre
{
  width: 200px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

HTML

<div class="centre">Some Text</div>

In IE6 you will need to add another outer div...

Stylesheet

div.layout
{
  text-align: center;
}
div.centre
{
  text-align: left;
  width: 200px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

HTML

<div class="layout">
  <div class="centre">Some Text</div>
</div>