css - 使用相当于表格方法的CSS居中div

Question

下面的表格方法正确地将 div 居中并且 div 的大小与内容的大小相匹配:

<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>

仅使用 div 元素的等效 CSS 是什么？我看到很多答案，例如:

div.center {
    margin-left: auto;
    margin-right: auto;
}

但是当使用这种方法时，我不清楚如何使 div 的宽度增大或缩小以匹配 div 的内容。我可以指定一个明确的宽度，但即便如此，内容也会溢出到右侧，因此它并不是真正居中(您可以通过设置 div 的背景颜色清楚地看到这一点)。

那么表格方法是否仍然优越，或者是否有仅使用 CSS 的方法来做到这一点？

更新:

根据要求，这是一个说明问题的示例:

http://jsfiddle.net/qn0txere/3/

第一个“表格方法”按预期工作。第二个 'margin: 0 auto' 方法并没有真正起作用，因为 div 不会收缩包裹内容。内容向右溢出。

Answer 1

我明白你的意思，但有很多方法可以解决这个问题，从长远来看，使用 CSS 样式更有好处，因为以后更改起来要容易得多等等，

要解决内容超出 div 的问题，您可以使用 auto 属性设置宽度和高度，

像这样:

div.center {
    width: auto;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

如果需要，您可能还希望添加 min-width 和 min-height 属性，以便在 div 中没有大量内容(或 max 属性)时看起来更有吸引力:

min-width: 300px;
min-height: 500px;
max-width: 500px;
max-height: 600px;

您可能还希望为特定的 div 添加 ID 或类，因此在这种情况下您可以更清楚地为特定的 div 编写 CSS