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

Question

I'm trying to horizontally center a `

` block element on a page and have it set to a minimum width. What is the simplest way to do this? I want the `

` 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

Your drawing didn't survive Wyzant's parsing, I'm afraid. But let me try to help:

Your block element will by default fill the available space from left to right, so setting a minimum width might cause overflow issues. Also, it should already be centered (technically) if it fills the available space.

If, however, you mean you set a maximum width, and the block is smaller than the available space, then you can use

margin: 0 auto;

to center it horizontally. You can also change the zero if you actually want margins on the top and bottom.

Ian.