Center div using css equivalent to table method - css

Question

The following table method properly centers the div and the size of the div matches that of the content:
<table>
<tbody>
<tr>
<td width='50%'></td>
<td>
<div>
<input type='text' name='linksearch' size='40'/>
<a href=''>Search</a>
</div>
</td>
<td width='50%'></td>
</tr>
</tbody>
</table>
What is the equivalent CSS using just div elements? I see a lot of answers like:
div.center {
margin-left: auto;
margin-right: auto;
}
but when using this method it is not clear to me how to make the width of the div grow or shrink to match the content of the div. I can specify an explicit width but even then, the content can overflow to the right and thus it is not really centered (you can see this clearly by setting the background-color of the div).
So is the table method is still superior or is there a way to do this using only CSS?
UPDATE:
As requested, here is an example that illustrates the problem:
http://jsfiddle.net/qn0txere/3/
The first "table method" works as expected. The second 'margin: 0 auto' method does not really work in that the div does not shrinkwrap around the content. The content overflows to the right.

Answer 1

I see what you mean, but there are ways around that, and using CSS for the style is far more beneficial in the long run as it's much easier to change later on etc,
To fix the problem of the content going outside of the div you can use the auto property for the width and height,
Like this:
div.center {
width: auto;
height: auto;
margin-left: auto;
margin-right: auto;
}
You may also wish to add min-width and min-height properties if needed to make it look more appealing if there isn't a great amount of content within the div (or max properties) :
min-width: 300px;
min-height: 500px;
max-width: 500px;
max-height: 600px;
You may also wish to add a ID or class to the specific div, so in this case you can more clearly write the CSS for just that specific div

Answer 2

You have to add a containing div (preferred) or add properties to the body. Since your markup was wrong anyways, I'll go for the preferred method by adding the FORM element:
<div class="center">
<form>
<input size="40" name="linksearch" type="text"/>
Search
</form>
</div>
Now, since I have my required elements, I can center things and make them work as I want because I have the chance to add positioning for all elements ( + proper markup):
.center {
text-align:center
}
form {
white-space: nowrap;
padding: 10px;
margin:0 auto;
width: auto;
background-color: #cc0;
display:inline-block
}
Really easy, huh? You can see an update to your fiddle so you can preview and play around