<p>After lots of attempts and search I have never found a satisfactory way to do it with CSS2.</p>
<p>A simple way to accomplish it is to wrap it into a handy <code>&lt;table&gt;</code> as shown in the sample below. Do you know how to do it avoiding table layouts and also avoiding quirky tricks?</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>table {
  margin: 0 auto;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
  &lt;tr&gt;
    &lt;td&gt;test&lt;br/&gt;test&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>
<hr />
<p>What I want to know is how to do it without a fixed width and also being a block.</p>

[{'answer_id': 46364, 'author': 'Jason Bunting', 'author_id': 1790, 'author_profile': 'https://Stackoverflow.com/users/1790', 'pm_score': 2, 'selected': False, 'text': '<p>This is going to be the lamest answer, but it works:</p>\n\n<p><a href="http://www.w3schools.com/TAGS/tag_center.asp" rel="nofollow noreferrer"><strong>Use the deprecated &lt;center&gt; tag</strong></a>.</p>\n\n<p>:P</p>\n\n<p>I told you it would be lame. But, like I said, it works!</p>\n\n<p>*shudder*</p>\n'}, {'answer_id': 46391, 'author': 'Joe Liversedge', 'author_id': 4552, 'author_profile': 'https://Stackoverflow.com/users/4552', 'pm_score': 4, 'selected': True, 'text': '<p>@Jason, yep, <code>&lt;center&gt;</code> works. Good times. I\'ll propose the following, though:</p>\n\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>body {\r\n  text-align: center;\r\n}\r\n\r\n.my-centered-content {\r\n  margin: 0 auto; /* Centering */\r\n  display: inline;\r\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="my-centered-content"&gt;\r\n  &lt;p&gt;test&lt;/p&gt;\r\n  &lt;p&gt;test&lt;/p&gt;\r\n&lt;/div&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<p><strong>EDIT</strong> @Santi, a block-level element will fill the width of the parent container, so it will effectively be <code>width:100%</code> and the text will flow on the left, leaving you with useless markup and an uncentered element. You might want to try <code>display: inline-block;</code>. Firefox might complain, but <a href="http://www.w3.org/TR/CSS21/visuren.html#display-prop" rel="nofollow noreferrer">it\'s right</a>. Also, try adding a <code>border: solid red 1px;</code> to the CSS of the <code>.my-centered-content</code> DIV to see what\'s happening as you try these things out.</p>\n'}, {'answer_id': 46392, 'author': 'Neall', 'author_id': 619, 'author_profile': 'https://Stackoverflow.com/users/619', 'pm_score': 1, 'selected': False, 'text': "<p>I think that your example would work just as well if you used a &lt;div&gt; instead of a &lt;table&gt;. The only difference is that the text in the &lt;table&gt; is also centered. If you want that too, just add the text-align: center; rule.</p>\n\n<p>Another thing to keep in mind is that the &lt;div&gt; will by default fill up all the available horizontal space. Put a border on it if you aren't sure where it starts and ends.</p>\n"}, {'answer_id': 46420, 'author': 'codeLes', 'author_id': 3030, 'author_profile': 'https://Stackoverflow.com/users/3030', 'pm_score': 0, 'selected': False, 'text': '<p>The following works well enough.  note the <em>position</em>, and the use of <em>auto</em></p>\n\n<pre><code>&lt;div style="border: 1px solid black; \n            width: 300px; \n            height: 300px;"&gt;\n            &lt;div style="width: 150px; \n                        height: 150px; \n                        background-color: blue;\n                        position: relative;\n                        left: auto;\n                        right: auto;\n                        margin-right: auto;\n                        margin-left: auto;"&gt;\n             &lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n\n\n                \n                 \n\n\n<p>NOTE: not sure if it works in IE.</p>\n'}, {'answer_id': 46652, 'author': 'ironkeith', 'author_id': 4106, 'author_profile': 'https://Stackoverflow.com/users/4106', 'pm_score': 0, 'selected': False, 'text': '<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>#wrapper {\r\n  width: 100%;\r\n  border: 1px solid #333;\r\n}\r\n#content {\r\n  width: 200px;\r\n  background: #0f0;\r\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrapper" align="center"&gt;\r\n  &lt;div id="content" align="left"&gt; Content Here &lt;/div&gt;\r\n&lt;/div&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}, {'answer_id': 50393, 'author': 'Bobby Jack', 'author_id': 5058, 'author_profile': 'https://Stackoverflow.com/users/5058', 'pm_score': 0, 'selected': False, 'text': '<p>In FF3, you can:</p>\n\n<pre><code>&lt;div style="display: table; margin: 0px auto 0 auto;"&gt;test&lt;br&gt;test&lt;/div&gt;\n</code></pre>\n\n<p>This has the advantage of using whatever element makes most semantic sense (replace the div with something better, if appropriate), but the disadvantage that it fails in IE (grr...)</p>\n\n<p>Other than that, without setting the width, your best bet is to use javascript to precisely position the left-hand edge. I\'m not sure if you\'d class that as a \'quirky trick\', though.</p>\n\n<p>It really depends on what you want to do, of course. Given your simple test case, a div with text-align: center would have exactly the same effect.</p>\n'}]
['https://Stackoverflow.com/questions/46350', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/4264/']