<p>My favorite equation for centering an xhtml element using only CSS is as follows:</p>

<pre><code>display: block;
position: absolute;
width: _insert width here_;
left: 50%;
margin-left: _insert width divided by two &amp; multiplied by negative one here_
</code></pre>

<p>There's also the simpler margin:auto method in browsers that support it. Does anyone else have tricky ways to force content to display centered in its container? (bonus points for vertical centering)</p>

<p>edit - oops, forgot the 'negative' part of one in the margin-left. fixed.</p>

Well that seems like massive overkill, I've got to say. I tend to set the container to
```
text-align:center;
```
for old browsers,
```
margin:auto;
```
for modern browsers, and leave it like that. Then reset text-align in the element (if it contains text).
Of course, some things need setting as block, and widths need setting... But what on earth are you trying to style that needs
that
much hacking around?
```
```
<div style="text-align:center">
     <div style="width:30px; margin:auto; text-align:left">
         <!-- this div is sitting in the middle of the other -->
     </div>
</div>
```
```