Center a block of content when you don't know its width in advance

Question

After lots of attempts and search I have never found a satisfactory way to do it with CSS2.

A simple way to accomplish it is to wrap it into a handy <table> as shown in the sample below. Do you know how to do it avoiding table layouts and also avoiding quirky tricks?

table {
  margin: 0 auto;
}

<table>
  <tr>
    <td>test<br/>test</td>
  </tr>
</table>

---

What I want to know is how to do it without a fixed width and also being a block.

Answer 1

@Jason, yep, <center> works. Good times. I'll propose the following, though:

body {
  text-align: center;
}

.my-centered-content {
  margin: 0 auto; /* Centering */
  display: inline;
}

<div class="my-centered-content">
  <p>test</p>
  <p>test</p>
</div>

EDIT @Santi, a block-level element will fill the width of the parent container, so it will effectively be width:100% and the text will flow on the left, leaving you with useless markup and an uncentered element. You might want to try display: inline-block;. Firefox might complain, but it's right. Also, try adding a border: solid red 1px; to the CSS of the .my-centered-content DIV to see what's happening as you try these things out.

Answer 2

This is going to be the lamest answer, but it works:

Use the deprecated <center> tag.

:P

I told you it would be lame. But, like I said, it works!

*shudder*

Answer 3

I think that your example would work just as well if you used a <div> instead of a <table>. The only difference is that the text in the <table> is also centered. If you want that too, just add the text-align: center; rule.

Another thing to keep in mind is that the <div> 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.