jquery - 如何在 CSS 中调整 div 框的大小，使文本无论长度如何都居中

Question

我发现很难用文字表达这个问题，因为我对 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;
}

Answer 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 给你一个不需要的 horizo​​ntal scrollbar，使用 css box-sizing : border-box 所以 100% 宽度 不会让你失望