如何使未知宽度的div块居中？答案

【问题标题】：How to center div block of unknown width?如何使未知宽度的div块居中？
【发布时间】：2013-01-15 01:14:43
【问题描述】：

我正在努力从我的网站上删除表格，并且只是学习所涉及的 div 技巧。我的home page 目前有一个居中的表格嵌套在另一个表格中。对于刚刚学习非表方法的人来说，移除外部表有点棘手，但它已经完成了。

我的问题是，内表非常容易居中（CSS 中的“margin:0 auto”），但它的div equivalent 不是。如果我指定绝对宽度（例如 640 像素），则 div 将居中，但由于我使用用户的字体大小进行设计（不是我指定的），我不知道给定用户的实际宽度。

我已经简化了主页并将其上线（test.html 和 HoH.css 这是 test.html 的概述 image。

抱歉所有链接。但是在另一个漂浮的东西里面有一个漂浮的东西，我不知道什么是相关的。文件 test.html 包含 63 行格式化的 HTML。 640px hr 仅供参考；它不会成为最终页面的一部分。

PS：我删除表格是因为当我要求网站评论时，几乎每个人的第一条评论都是“摆脱该死的表格”。

【问题讨论】：

目前这个问题已经很本地化了。但简而言之，将text-align: center; 放在h1 上。您可能需要处理右侧的框与h1 对齐的方式。有关居中的更多信息，请参阅stackoverflow.com/questions/14286597/css-alternative-to-center/…。

标签： css html

【解决方案1】：

也许您不应该担心用户的字体大小，因为所有现代浏览器都会缩放整个页面，不仅是字体大小，而且每个人都会对您的固定宽度感到满意。

您也可以使用 EM 值代替 PX，1em = 以 px 为单位的字体大小。如果您的字体大小为 16px，则可以将 640px 更改为 40em。例如，如果有人有两倍大的字体，他会得到两倍宽的块。

如果你想要未知宽度块居中的css解决方案，你可以使用inline-block和text-align:center：http://jsfiddle.net/rBc4T/

【讨论】：

【解决方案2】：

使用 CSS 和 jQuery -

css -

#divID{ left:50%;}

jQuery -

(function(){
var marginLeft = $('#divID').width();
$('#divID').css('marginLeft','-'+ marginLeft /2 +'px');
});

【讨论】：