css：如何将box-div元素直接居中？[副本]

Question

当我使用top:50%和left:50%时

这个盒子不在正中央。当然，当盒子很小的时候，它看起来是居中的。但当盒子有点大时，它看起来好像没有居中。

我如何解决这个问题？

Answer 1

顶部和左边对应于方框的左上角。你要做的是让它们与中心相对应。所以如果你设置边缘顶部和边缘左侧如果高度和宽度分别为负数的一半，就会得到一个居中的框。

300x200箱的示例：

宽度：300px；高度：200px；最高：50%；左：50%；左边边距：-150px；边距顶部：-100px；

Answer 2

使用翻译将完全实现这一点。只需应用此

div中心{位置：固定；/*或绝对值*/最高：50%；左：50%；/*带上你自己的前缀*/转换：转换（-50%，-50%）；}

来源

Answer 3

水平：使用固定宽度和

左边距：自动；边缘-右侧：自动；

垂直：那可不容易。你可以使用

显示：表格居中

然后给它一个

垂直对齐：中间

Answer 4

您可以为长方体指定一个固定的宽度和高度，然后为其边距顶部和边距左侧属性指定高度和宽度的负一半。

编辑：示例

div中心{宽度：500px；高度：400px；最高：50%；左：50%；位置：绝对；边缘顶部：-200px；左边距：-250px；}

Answer 5

一种方法是为长方体指定特定宽度，然后将每一侧（左侧和右侧）的剩余距离减半。如果使用百分比而不是像素宽度，这可能会更容易，例如。，

<div style=“margin-left:25%；margin-right:25%”></div（分频）>

这样就为div框留出了50%的宽度。

Answer 6

非常奇怪的CSS“语言”并没有提供一种简单的方法来将元素置于屏幕中央。一定要弄虚作假！这是我对高度和宽度都为AUTO的元素的唯一解决方案。尝试使用FF19（Win+Mac）、CH25（Win+Mac）和IE9。

.覆盖{位置：绝对；顶部：0；左：0；宽度：100%；高度：100%；背景颜色：#eee；/*美学随心所欲*/}.overlay.vref{/*它是一个垂直引用，用于使垂直对齐有效*/显示：嵌入式块；垂直对齐：中间；/*这就产生了魔力*/宽度：1px；高度：100%；溢出：隐藏；}覆盖.message{显示：嵌入式块；填充：10px；边框：2px实心#f00；/*美学随心所欲*/背景色：#ddd；/*美学随心所欲*/垂直对齐：中间；/*这就产生了魔力*/最大宽度：100%；/*防止长短语破坏v对齐*/}<div class=“overlay”><div class=“vref”></div（分频）><div class=“message”>这里有您想要的任何东西<div class=“vref”></div（分频）></div>

Answer 7

正文{text-align:中心；}#盒子{宽度：500px；/*无论你的宽度是多少*/边距：10px自动；文本对齐：左；}

以上内容将使您的方框在页面上水平居中，顶部和底部的边距为10倍（显然，顶部/底部的边距可以根据您的需要进行更改）。IE需要在正文上使用“text-align”，否则它通常无法掌握窍门。然后，您需要在方框上左对齐文本（除非您希望文本也居中），以抵消正文上的文本对齐中心。

尝试垂直居中是几乎不可能使用纯CSS的。虽然CSS中有垂直对齐，但它不像表中的HTML垂直对齐那样工作，所以在CSS2中没有像HTML那样内置的垂直对齐。问题是你处理的是一个未知的高度——即使你知道盒子的高度，页面的高度也是未知的，或者说，你想把盒子固定在中间是什么？页面？视口？每个人的可见屏幕区域都会不同，这取决于他们的屏幕分辨率、浏览器以及所有浏览器对高度的解释。

有各种各样的方法声称已经解决了这个问题，但通常并不是所有浏览器都能可靠地工作。我找到了这个前几天，这似乎还不错，但在Google Chrome中不起作用（在Firefox和Opera中都有效，但我没有机会查看IE）。关于这个问题有一个有趣的讨论这个线程总结了各种方法及其优缺点，非常值得一看。

编辑：只要你（或网站访问者）不增加字体大小或行高，Dav在第一次回复中的解决方案就可以正常工作。容器将居中，但一旦字体大小增加或添加更多内容，就会溢出容器。