如何在 CSS 中调整 div 框的大小，使文本居中而不考虑长度答案

【问题标题】：How to size a div box in CSS so text is centered regardless of length如何在 CSS 中调整 div 框的大小，使文本居中而不考虑长度
【发布时间】：2013-07-28 13:40:00
【问题描述】：

我发现很难用语言表达这个问题，因为我对 CSS 的了解不够。因此，我制作了两个示例 jsfiddles。

在第一个示例中，我们看到输出如何显示左对齐文本。 http://jsfiddle.net/Aro2220/yw38p/

但是在第二个示例中，我们看到当文本足够长时，它会填满框架的整个宽度（不确定这是否是正确的术语）并且一直很好地居中。 http://jsfiddle.net/Aro2220/DUcP6/

我试图让文本在该框架中完全居中，无论长度如何。我怎样才能做到这一点？我的 CSS 非常稀疏，我不确定是否有我遗漏的 CSS 命令可以轻松完成这项工作，或者这是一项复杂的任务。

#outer {
    position: absolute;
    overflow: hidden;
    height: 200px;    
}

#inner {
   position: relative;  
   top: 0px;    
   text-align: center;
}

【问题讨论】：

顺便说一句，你不需要top: 0px 来完成这项工作。此外，如果您要保留它，则单元（在本例中为 px）部分是多余的。您不需要为 0 值指定单位，因为任何单位的 0 都为零。

标签： jquery html css text-align

【解决方案1】：

使用这个Demo1 Demo2

这样就可以了

#outer {
    position: absolute;
    overflow: hidden;
    height: 200px;
    width:100%; // added this to make the outer div width 100%
}

sfjedi推荐

如果你有问题 w/ margins 和/或 padding 给你一个不需要的 horizontal scrollbar，请使用 css box-sizing: border-box 这样100% width 不会让你失望

【讨论】：

好答案。如果你有边距和/或填充问题给你一个不需要的水平滚动条，使用 css box-sizing: border-box 这样100% 宽度不会让你失望。
在答案中添加了您的建议 :)
我最初尝试了 width:100%，但我将它放在 #inner 而不是 #outer 中。谢谢。